陌丿尘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条)

报告相同问题？

  • JavaScript实现获取select下拉框中第一个值的方法
    2020-10-18 18:16
    本文主要介绍如何使用JavaScript获取select下拉框中的第一个值，这涉及到页面元素属性的获取和操作，以及如何使用JavaScript编写函数来完成这一任务。 首先，要实现获取select下拉框中第一个值的功能，需要使用...
  • jQuery Ajax实现Select多级关联动态绑定数据的实例代码
    2020-10-17 19:47
    本文主要讲解了如何利用jQuery和Ajax技术实现网页中Select下拉框的多级关联动态绑定数据，即实现省份选择后城市下拉框动态更新的功能。通过实际的代码实例，详细说明了从后端数据库读取数据，并通过前端JavaScript...
  • JQuery select标签操作代码段
    2020-10-29 03:03
    在 *** Web 开发中，DropdownList 是一种常用的数据绑定控件，其在前端呈现时实际上就是一个 select 标签。当需要通过 jQuery 对这些 select 标签进行动态操作时，可以通过 jQuery 提供的选择器和方法来实现。 要...
  • JQuery 操作select标签实现代码
    2020-10-29 03:26
    在***开发环境中，DropDownList控件是一个常用的选择控件，它在前端页面中呈现的就是一个select标签。使用JQuery来操作select标签，可以方便地实现下拉列表的动态添加、修改和删除选项，以及改变选中值等功能，从而...
  • select-birthday:一个选择生日的库，由 jquery 提供支持。 现在过时了
    2021-06-19 16:57
    本文将深入探讨一个名为"select-birthday"的库，它是一个专门用于选择生日的组件，依赖于流行的jQuery框架。然而，值得注意的是，这个库已被标记为过时，这意味着可能有更好的替代品或新的开发趋势使其失去了优势。 ...
  • jQuery遍历页面中的标签
    2022-10-13 12:04
    旭寒ls的博客 遍历html页面中所需要的元素是一个很常见的操作;
  • jquery 监听多个select
    2024-07-14 06:28
    egzosn的博客 元素的 jQuery 实现在网页开发中，我们经常需要处理多个<select>元素的事件监听。本文将介绍如何使用jQuery来监听多个<select>元素，并详细分析代码和原理。为什么选择jQuery？jQuery提供了简洁的语法...
  • jQuery实现动态显示select下拉列表数据的方法
    2021-01-19 16:05
    总的来说，本文通过一个具体的实例，详细讲解了使用jQuery动态显示select下拉列表数据的整个流程，包括数据集的定义、下拉列表的初始化、数据的动态绑定、事件处理以及页面更新等操作。同时，还向读者推荐了一些有助...
  • jquery下拉选择城市插件hhDrop.zip
    2022-11-22 17:15
    一个优秀的下拉选择城市插件能够极大地提升用户在填写地址时的便捷性，而jQuery下拉选择城市插件hhDrop正是这样一款工具。本文将深入探讨该插件的核心原理、实现方式以及如何在实际项目中进行有效应用。 首先，...
  • jQuery招聘网站选择地区行业职位.zip
    2022-11-24 12:30
    在招聘网站中，AJAX可以让用户在不刷新整个页面的情况下发送和接收数据，例如，当用户选择一个地区或行业后，AJAX可以即时更新职位列表。 7. **数据绑定**：在现代前端框架中，数据绑定允许视图与模型之间的自动...
  • 没有解决我的问题, 去提问

问题事件

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