在html页面中jqery怎么绑定一个select标签所选择的内容呢

img


就像图片里的，当我在选择了第几页的时候，下面文字就会动态的根据我选择的出现相应的内容，然后已知select选择框里的内容是已经根据数据库查找出来的，qing问这个功能该怎么实现呢

select change事件里 获取 dom改变 其innerHtml就行

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>

<body>
   <select name="page" id="page">

   </select>
   <p id="txt">选择了第()页</p>
</body>
<script>
   //接口获取的值
   let arr = [1, 2, 3, 4, 5, 6, 7];
   //获取 select 的dom
   let pageSelect = document.getElementById("page");
   let str = "";
   //动态 渲染 option选项
   for (var i = 0; i < arr.length; i++) {
      str += `<option value="${i + 1}">第${i + 1}页</option>`;
   };
   pageSelect.innerHTML = str;

   let p = document.getElementById("txt");
   //绑定change事件
   pageSelect.onchange = function (e) {
      let val = e.target.value;
      p.innerHTML = `选择了第(${val})页`;
   }
</script>

</html>

jq写法

  // jq写法
   //接口获取的值
   let arr = [1, 2, 3, 4, 5, 6, 7];
   //获取 select 的dom

   let pageSelect = $("#page");
   let str = "";
   //动态 渲染 option选项
   for (var i = 0; i < arr.length; i++) {
      str += `<option value="${i + 1}">第${i + 1}页</option>`;
   };
   pageSelect.html(str);

   let p = $("#txt");
   //绑定change事件
   pageSelect.on('change', function (e) {
      let val = e.target.value;
      p.html(`选择了第(${val})页`);
   })

不管select数据是哪里来的，监听组件change事件，变化了通过select的value把值取出来，赋值给括号里的组件就行
具体代码因为不知道你的组件的定义，没法详细表述

如有帮助，望采纳。
获得值分情况
1：获得设置value时，获得的是value 的值

<select name="flag" id="flag">
    <option>A</option>
    <option selected value="66">B</option>
    <option>C</option>
    <option>D</option>
</select>

<script>
    console.log($("#flag").val())

img

2：未设置value：

img


<select name="answer">
    <option>2</option>
    <option>3</option>
    <option selected>1</option>
</select>
<script>
    console.log($("#flag").val())
    console.log($("select").val())

3：通过form表单设置name值

img


<form action="">
    <select name="answer">
        <option>2</option>
        <option>3</option>
        <option selected>1</option>
    </select>
</form>

<script>
    console.log($("#flag").val())
    console.log($("select").val())
    console.log($("form").serialize())



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <select name="select" id="select" onchange="change()">
      <option value="a">a</option>
      <option value="b">b</option>
      <option value="c">c</option>
    </select>
    <div>选择了第（<span id="pageNo"></span>）页</div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      function change() {
        var val = $("select").val();
        $("#pageNo").text(val);
      }
    </script>
  </body>
</html>