jquery 下拉选择添加监听器

时间: 2023-08-05 17:02:29 浏览: 130

jQuery实现监听下拉框选中内容发生改变操作示例

5星 · 资源好评率100%

本文实例讲述了jQuery实现监听下拉框选中内容发生改变操作。分享给大家供大家参考，具体如下： jQuery代码部分： [removed] $(document).ready(function(){ var defaultId = "${defaultSelected}"; var defaultTime = "${timeName}"; $("select option").each(function(){ if($(this).val()==defaultId || $(this).val()==defaultTime){ 在本文中，我们将深入探讨如何使用jQuery来监听下拉框（`<select>`元素）的选中内容变化。这个功能在网页交互中非常常见，能够根据用户的选择动态更新页面其他部分的状态。以下是一个完整的示例，包括jQuery代码和HTML结构。我们需要引入jQuery库，这通常通过在HTML文档头部添加以下链接来实现： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 接下来，我们来看jQuery代码部分： ```javascript $(document).ready(function() { var defaultId = "${defaultSelected}"; // 获取默认选中的ID var defaultTime = "${timeName}"; // 获取默认时间名称 // 遍历下拉框的所有选项，设置默认选中 $("select option").each(function() { if ($(this).val() === defaultId || $(this).val() === defaultTime) { $(this).attr("selected", "selected"); } }); // 监听id为"all"的下拉框的change事件 $("#all").change(function() { if ($("#allItem").is(":selected")) { // 检查"All"选项是否被选中 $("#timeText").hide(); // 隐藏时间选择文本 $("#timeSelect").hide(); // 隐藏时间选择下拉框 } else { $("#timeText").show(); // 显示时间选择文本 $("#timeSelect").show(); // 显示时间选择下拉框 } }); }); ``` 这段代码的主要功能是： 1. 当文档加载完成后，使用`$(document).ready()`函数确保所有DOM元素已经加载完毕。接着，`defaultId`和`defaultTime`变量用于存储默认选中的项目ID和时间名称。然后遍历下拉框的所有`<option>`，如果其值与默认值匹配，就设置为选中状态。 2. 使用`$("#all").change()`监听id为"all"的下拉框的`change`事件。当用户更改此下拉框的选择时，事件处理器会触发。检查`$("#allItem")`（代表"All"选项）是否被选中。如果选中，隐藏与时间相关的元素；否则，显示这些元素。 HTML部分： ```html <form action="${baseUrl}/report/issueStatus.shtml"> <span>Select a project:</span> <select name="selectedProId" id="all">  <c:forEach items="${projectNameId}" var="pi"> <option value="${pi.value}">${pi.key}</option> </c:forEach>  <option value="-1" id="allItem">All</option> </select> <span id="timeText">Select a time horizon:</span>  <select name="timeHorizon" id="timeSelect"> <option value="Week">Last week</option> <option value="Month">Last month</option> </select> <button type="submit" id="submit">search</button> </form> ``` 这个HTML部分包含两个下拉框，一个用于项目选择，另一个用于时间范围选择。`<c:forEach>`标签是JSP中的循环标签，用于动态生成项目选项。`<span id="timeText">`和`<select id="timeSelect">`元素是与jQuery代码中响应事件的部分相对应的元素。总结一下，这个示例展示了如何使用jQuery监听下拉框的选中内容变化，并根据用户的选择更新页面其他部分。同时，它还演示了如何设置默认选中项，以及如何结合HTML和JavaScript进行动态交互。对于开发人员来说，理解并掌握这种技术对于构建动态和响应式的Web应用至关重要。

在 jQuery 中，你可以使用 `change` 事件来添加下拉选择的监听器。下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>下拉选择监听器示例</title> <script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script> </head> <body> <select id="mySelect"> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> <script> $(document).ready(function() { $("#mySelect").change(function() { var selectedValue = $(this).val(); console.log("选择的值：" + selectedValue); // 在这里可以执行其他操作 }); }); </script> </body> </html> ``` 在上面的示例中，我们首先引入了 jQuery 库。然后，我们创建了一个下拉选择框，并给它一个 id `mySelect`。接下来，使用 `$(document).ready()` 来确保 DOM 加载完成后再执行代码。在该函数内部，我们使用 `change` 事件添加了一个监听器，当下拉选择框的值发生变化时，会触发该事件的回调函数。回调函数中，我们可以获取所选值，并执行其他操作。在示例中，我们将所选值打印到控制台上。你可以根据需要修改回调函数中的代码来实现你想要的功能。

阅读全文

jquery 下拉选择添加监听器

相关推荐

Java监听器

Java下拉框监听，加入界面，切换界面的处理

jquery下拉选择城市插件

jQuery下拉选择城市插件hhDrop

jquery下拉选择城市插件hhDrop特效代码

jquery下拉选择城市插件hhDrop.zip

jquery 下拉

jQuery下拉菜单选中添加特效代码

jQuery城市下拉选择

jQuery下拉日期选择插件.zip

jQuery下拉搜索菜单选择插件

jQuery下拉列表框双向选择

jQuery下拉菜单选择框特效.zip

JQuery下拉导航

jQuery下拉菜单

Jquery下拉菜单

jQuery 下拉菜单

jquery下拉菜单

最新推荐

Bootstrap导航条可点击和鼠标悬停显示下拉菜单

jQuery EasyUI编辑DataGrid用combobox实现多级联动

Vue实现百度下拉提示搜索功能

jquery mobile1.4.1中文学习手册

Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发

WordPress作为新闻管理面板的实现指南

管理建模和仿真的文件

函数与模块化编程宝典：J750编程高效之路

用C语言求有4个圆塔，圆心分别为（2，2)，(2，-2)，(-2，2)，(-2，-2)圆半径为1， 这4个塔的高度为10m 塔以外无建筑物接输入任意点的坐标 求该点的建筑高度（塔外的高度为零)的程序

NPC_Generator：使用Ruby打造的游戏角色生成器

用C语言求有4个圆塔，圆心分别为（2，2)，(2，-2)，(-2，2)，(-2，-2)圆半径为1，这4个塔的高度为10m 塔以外无建筑物接输入任意点的坐标求该点的建筑高度（塔外的高度为零)的程序