陌丿尘16 2022-04-28 13:42 采纳率: 90.2%
浏览 33
已结题

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

img


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

  • 写回答

4条回答 默认 最新

  • 崽崽的谷雨 2022-04-28 13:51
    关注

    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})页`);
   })
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题？

问题事件

  • 系统已结题 5月6日
  • 已采纳回答 4月28日
  • 创建了问题 4月28日

悬赏问题

  • ¥15 做个有关计算的小程序
  • ¥15 MPI读取tif文件无法正常给各进程分配路径
  • ¥15 如何用MATLAB实现以下三个公式（有相互嵌套）
  • ¥30 关于#算法#的问题：运用EViews第九版本进行一系列计量经济学的时间数列数据回归分析预测问题 求各位帮我解答一下
  • ¥15 setInterval 页面闪烁，怎么解决
  • ¥15 如何让企业微信机器人实现消息汇总整合
  • ¥50 关于#ui#的问题：做yolov8的ui界面出现的问题
  • ¥15 如何用Python爬取各高校教师公开的教育和工作经历
  • ¥15 TLE9879QXA40 电机驱动
  • ¥20 对于工程问题的非线性数学模型进行线性化