jquery选择下拉框触发事件的实现

最新推荐文章于 2025-06-05 17:25:06 发布
最新推荐文章于 2025-06-05 17:25:06 发布
阅读量3.3w 收藏 6
点赞数 4
CC 4.0 BY-SA版权
分类专栏： front-end-jqurey
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_38465623/article/details/80600892
本文介绍使用jQuery实现下拉框选择事件的方法，通过bind()方法实现不同选项切换时显示不同内容的效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

因为jquery选择下拉框触发事件的实现而焦头烂额，先前我用了对下拉框option中的id用了click事件，在火狐中竟然能运行而在其他浏览器却不行，这让我一度以为是浏览器兼容问题。

错错错，option中没有id也没有click事件。

我的天，超级发现问题超级开心。

下面是我的实现。

所需知识

bind（）方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

其语法为：

$(selector).bind(event,data,function)

参数说明如下：

  • event：规定添加到元素的一个或多个事件。必需。

  • data：  规定传递到函数的额外数据。可选。

  • function： 规定当事件发生时运行的函数。必需。


实现步骤：

  1. 在select的option中添加value值，便于区分，就设置为123
  2. 导入jquery的cdn
  3. 先将tongzhi和shiyan这两个div块隐藏
  4. 选择select添加bind() 方法
  5. 在function中进行判断，如果为value=2，那么显示shiyan，否则显示其他页面。

<!DOCTYPE HTML>
<html>

	<head>
		
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
		<script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"></script>
		<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
		<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
		<script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
		<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<link href="../../后台/Hplus-v/css/datetime/bootstrap-datetimepicker.min.css" rel="stylesheet" />
		<link rel="shortcut icon" href="favicon.ico">

		<link href="../../后台/Hplus-v/css/font-awesome.css?v=4.4.0" rel="stylesheet">
		<link href="../../后台/Hplus-v/css/animate.css" rel="stylesheet">
		<link href="../../后台/Hplus-v/css/style.css?v=4.1.0" rel="stylesheet">

		<!-- 全局js -->
<!--		<script src="../../后台/Hplus-v/js/jquery.min.js"></script>-->
	<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<!--	<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>-->
<!--<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>-->
<!--<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>-->
<!--<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>-->
<!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
<!--<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>-->
<!--<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>-->
<!--<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>-->

		<script src="../../后台/Hplus-v/js/bootstrap.min.js?v=3.3.6"></script>

		<!-- 自定义js -->
		<script src="../../后台/Hplus-v/js/content.js?v=1.0.0"></script>

		<!-- layerDate plugin javascript -->
		<script src="../../后台/Hplus-v/js/plugins/layer/laydate/laydate.js"></script>
		<script>//外部js调用
laydate({
	elem: '#hello', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
	event: 'focus' //响应事件。如果没有传入event，则按照默认的click
});

//日期范围限制
var start = {
	elem: '#start',
	format: 'YYYY/MM/DD hh:mm:ss',
	min: laydate.now(), //设定最小日期为当前日期
	max: '2099-06-16 23:59:59', //最大日期
	istime: true,
	istoday: false,
	choose: function(datas) {
		end.min = datas; //开始日选好后，重置结束日的最小日期
		end.start = datas //将结束日的初始值设定为开始日
	}
};
var end = {
	elem: '#end',
	format: 'YYYY/MM/DD hh:mm:ss',
	min: laydate.now(),
	max: '2099-06-16 23:59:59',
	istime: true,
	istoday: false,
	choose: function(datas) {
		start.max = datas; //结束日选好后，重置开始日的最大日期
	}
};
laydate(start);
laydate(end);</script>
		
        <script >  $(function() {
  	$("#shiyan").hide();
  	$("select").bind("change", function() {
  		if(this.value == "2") {

  			$("#tongzhi").hide();
  			$("#shiyan").show();
  		} else {

  			$("#shiyan").hide();
  			$("#tongzhi").show();
  		}
  	})
  });</script> 
		<style type="text/css">
			body,
			html {
				overflow-x: hidden;
			}
			
			.div1 {
				display: block;
				margin-left: auto;
				margin-right: auto;
				margin-top: 20px;
				width: 90%;
				/*padding-bottom: 100%*/
			}
			
			.selectpicker {
				display: block;
				width: 100%;
				height: 34px;
				padding: 6px 12px;
				font-size: 14px;
				line-height: 1.42857143;
				color: #555;
				background-color: #fff;
				background-image: none;
				border: 1px solid #ccc;
				border-radius: 4px;
			}
			
			.demo-input {
				padding-left: 10px;
				height: 38px;
				min-width: 262px;
				line-height: 38px;
				border: 1px solid #e6e6e6;
				background-color: #fff;
				border-radius: 2px;
			}
			
			.demo-footer {
				padding: 50px 0;
				color: #999;
				font-size: 14px;
			}
			
			.demo-footer a {
				padding: 0 5px;
				color: #01AAED;
			}
		</style>
		<script type="text/javascript">var ue=UE.getEditor('editor1');
var ue=UE.getEditor('editor2');
var ue=UE.getEditor('editor3');</script>
	
	</head>

	<body class="gray-bg">

		<div class="div1">
			<br>
			<br>
			<h1>发布文章</h1>

			<hr style="border:5px solid #DDDDDD" />
			<br>
			<!--文章分类-->
			<div class="col-lg-2" style="margin-top: 50px;">文章分类：</div>
			<div class="col-lg-10" style="margin-top: 50px;">
				<select  name="se1" id="se1" class="selectpicker" style="width: 100%;">
					<option value="0" name="option1" >通知</option>
					<option value="1" name="option2">内部通知</option>
					<option value="2" name="option3">实验项目简介及连接</option>

				</select>
			</div>
			<!--通知-->

			<div id="tongzhi"  >

				<!--项目名称-->
				<div class="col-lg-2" style="margin-top: 50px;">标题：</div>
				<div class="col-lg-10" style="margin-top: 50px;"> <input type="text" class="form-control" id="inputXiang" placeholder="输入内容" /></div>

				<!--作者成员-->
				<div class="col-lg-2" style="margin-top: 50px;">作者：</div>
				<div class="col-lg-10" style="margin-top: 50px;">
					<input type="text" class="form-control" id="inputXiang" placeholder="输入内容" />
				</div>

				<!--是否评论-->
				<div class="col-lg-2" style="margin-top: 50px;">是否评论：</div>
				<div class="col-lg-10" style="margin-top: 50px;"> <label class="radio-inline">
  						<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 是
						</label>
					<label class="radio-inline">
 						 <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 否
						</label></div>

				<!--正文-->
				<div class="col-lg-2" style="margin-top: 50px;">内容：</div>
				<div class="col-lg-10" style="margin-top: 50px;">
					<!--<script id="editor1" type="text/plain" style="width:1109px;height:500px;"></script>-->
					<div id="editor1" type="text/plain" style="width:1109px;height:500px;"></div>
				</div>

				<!--确定-->
				<div class="col-lg-2" style="margin-top: 50px;"></div>
				<div class="col-lg-10" style="margin-top: 50px;">
					<button class="btn btn-primary btn-block" onclick="alert('发布成功')">确定</button>
				</div>
			</div>

			<!--实验项目-->
			<div id="shiyan"  >
			

				<!--项目名称-->
				<div class="col-lg-2" style="margin-top: 50px;">项目名称：</div>
				<div class="col-lg-10" style="margin-top: 50px;"> <input type="text" class="form-control" id="inputXiang" placeholder="输入内容" /></div>


				<!--项目名称-->
				<div class="col-lg-2" style="margin-top: 50px;">项目名称：</div>
				<div class="col-lg-10" style="margin-top: 50px;"> <input type="text" class="form-control" id="inputXiang" placeholder="输入内容" /></div>

				<!--项目简介-->
				<div class="col-lg-2" style="margin-top: 50px;">项目简介：</div>
				<div class="col-lg-10" style="margin-top: 50px;">
					<!--<script id="editor2" type="text/plain" style="width:1109px;height:500px;"></script>-->
					<div id="editor2" type="text/plain" style="width:1109px;height:500px;"></div>
				</div>

				<!--作者成员-->
				<div class="col-lg-2" style="margin-top: 50px;">作者成员：</div>
				<div class="col-lg-10" style="margin-top: 50px;">
					<input type="text" class="form-control" id="inputXiang" placeholder="输入内容" />
				</div>

				<!--上限日期-->
				<div class="col-lg-2" style="margin-top: 50px;">上限日期：</div>
				<div class="col-lg-10" style="margin-top: 50px;">
					<input class="form-control layer-date" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
					<label class="laydate-icon"></label>

				</div>

				<!--进入查看-->
				<div class="col-lg-2" style="margin-top: 50px;">进入查看：</div>
				<div class="col-lg-10" style="margin-top: 50px;"> <input type="text" class="form-control" id="inputXiang" placeholder="输入内容" /></div>

				<!--是否评论-->
				<div class="col-lg-2" style="margin-top: 50px;">是否评论：</div>
				<div class="col-lg-10" style="margin-top: 50px;"> <label class="radio-inline">
  						<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 是
						</label>
					<label class="radio-inline">
 						 <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 否
						</label></div>

				<!--正文-->
				<div class="col-lg-2" style="margin-top: 50px;">正文：</div>
				<div class="col-lg-10" style="margin-top: 50px;">
				<!--	<script id="editor3" type="text/plain" style="width:1109px;height:500px;"></script>-->
				<div id="editor3" type="text/plain" style="width:1109px;height:500px;"></div>
				</div>

				<!--确定-->
				<div class="col-lg-2" style="margin-top: 50px;"></div>
				<div class="col-lg-10" style="margin-top: 50px;">
					<button class="btn btn-primary btn-block" onclick="alert('发布成功')">确定</button>
				</div>
			</div>
	</body>

</html>

这是我项目里的一个html页面，我就不把css给你们了，不过复制粘贴应该能运行，反正jquery下拉框选择触发事件是实现了。


jquery select操作下拉框
qq_46027475的博客
05-15 820
获取select选择的text和value，并设置选中 <select id="select_id" name="id"> <option value="">请选择</option> <option value="1">第一季度</option> <option value="2">第二季度</option> <option value="3">第三季度</option> </select&
jQuery 点击按钮同时触发下拉框的事件
bugAndMe的博客
05-09 2733
点击页面的按钮，触发下拉框的事件，用change，之前试了click和select都不行。 加载页面时先给下拉框一个change事件。 $("#updateMode").on("change", fnUpdateMode); 对于的事件函数 function fnUpdateMode(){ switch ($(this).val()) { ...
基于jQuery的select下拉框选择触发事件实例分析
12-29
本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法。分享给大家供大家参考，具体如下： 我一直以来都认为，select 下拉框选择对选项 options 使用 onclick 注册事件即可，如下： <select> 选项一 选项二 </select> 今天有个要求需要做联动菜单，就是每点一次，相邻的下拉框会自动改变 ，我一想没问题啊，onclick走起 于是走上面的路线，客户还说了，IE
bootstrap下拉选择框选中事件_基于jQuery的select下拉框选择触发事件实例分析
weixin_39962356的博客
12-18 551
本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法。分享给大家供大家参考，具体如下：我一直以来都认为，select 下拉框选择对选项 options 使用 onclick 注册事件即可，如下：选项一选项二今天有个要求需要做联动菜单，就是每点一次，相邻的下拉框会自动改变 ，我一想没问题啊，onclick走起于是走上面的路线，客户还说了，IE8必须支持，我想想也是，XP的IE内核只...
jQuery 下拉菜单选择器
最新发布
zichenblog的博客
06-05 487
无西瓜</option><option value="banana">香蕉</option><option value="orange">橙子</option><option value="apple">苹果</option><option value="grape">葡萄</option><option value="">请选择水果
jquery下拉框事件
u012533596的专栏
06-05 531
直接上代码了，有需要的可以参考一下 $(document).ready(function(){ var arrData = { "工厂1":{"品牌1":["型号1","型号2"],"品牌2":["型号3","型号4"] }, "工厂2":{"品牌3":["型号a","型号b"],"品牌4":["型
JQuery实现下拉框Select的获取值与文本、动态绑定数据、事件等操作
热门推荐
pan_junbiao的博客
10-24 1万+
1、下拉框的应用 在网站中下拉框select是经常使用的控件，下面将介绍JQuery实现下拉框select的获取值与文本、动态绑定选项、事件等操作。 1.1 获取选中项的值 var value = $("#selectUser").val(); 1.2 获取选中项的文本 var text = $("#selectUser").find("option:selected").text(); 1.3 获取选中项的索引 var index = $("#selectUser").get(0).s
jQuery实现监听下拉框选中内容发生改变操作示例
12-04
当用户更改此下拉框的选择时，事件处理器会触发。检查`$("#allItem")`（代表"All"选项）是否被选中。如果选中，隐藏与时间相关的元素；否则，显示这些元素。 HTML部分： ```html ${baseUrl}/report/issueStatus....
jQuery模拟下拉框选择对应菜单的内容
10-20
1. 当用户点击标题（`.zn-classreport-tabstle`）时，使用jQuery的`.click()`方法来触发事件处理函数。 2. 处理函数会显示隐藏的`<ul>`列表，并可能添加一个CSS类（如`.active`）来改变样式，使其可见。 3. 用户点击...
jQuery手机下拉框select
11-03
总的来说，`jQuery手机下拉框select` 是通过jQuery Mobile库实现的一种优化移动端用户体验的解决方案。它提供了丰富的样式、交互和功能特性，帮助开发者创建出更符合移动设备需求的下拉菜单。通过理解和应用这些技术...
jq 下拉列表选中事件,jQuery下拉选择事件
weixin_42142062的博客
02-17 468
Is there a specific event for when a user selects an item in a dropdown box? I am creating a fairly large form that uses multiple dropdown boxes. On load all but the first are disabled, as the user se...
jquery下拉列表的点击事件
你究竟是想一辈子卖糖水，还是希望获得改变世界的机会？
01-13 2497
<select name="parentId" id="parentId" class="parentClass"> 请选择 ${parentClassify.parentName}      用id取值 $('#parentId').change(function() { alert($(this).val());
jq 下拉框
weixin_30648587的博客
12-05 303
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> /*下拉...
js选下拉框 提交 （触发事件）
A9925的专栏
06-10 2828
静态页面： - 请选择 - HK Island East Yuen Long Central and Western Kwun Tong HK Island South Yau Tsim Mong Tsuen Wan Sham Shui Po Wan Chai Kowloon City Tai Po NT North Remote Island Sai K
下拉框的触发事件分析（onchange、onfocus、onclick）
zhanghuan0303的博客
04-23 1万+
select的onChange事件问题解决（onchange、onfocus、onclick、onmousedown） 一、onChange事件只有在值改变时才可触发，所以必须在每一次选择时（尤其第一次）保证选择的值是改变的！ 所以 selected>个人//在这要选定一个默认的值 “selected” 单位 这样在选择第二个时，值就会变即可触发onChang
jquery选择下拉框触发事件的实现及值的获取
zuihongyan518的博客
05-08 1485
选中下拉框，隐藏对应的输入框，以及获取每一个数据值。 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <html> <head> ...
js 多选框被选中触发的事件_JS 实现 select中指定option选中触发事件（下拉框）...
weixin_39890452的博客
12-19 663
转自：http://www.cnblogs.com/moli-/p/6406170.html在用到下拉列表框select时，需要对选中的选项触发事件，其实本身没有触发事件方法，我们只有在select里的onchange方法里触发。想添加一个option的触发事件,在option中添加onclick 点来点去就是不会触发事件又在select中添加onclick 这下可好了,没选option呢就触发了...
jq 下拉列表选中事件_jQuery实现Select下拉列表进行状态选择功能
weixin_39949954的博客
12-22 1210
场景：eg:在管理一篇博文时，因博文的管理有一列叫：状态的列，该列有诸多状态，如：正常，待审核，删除等...此时，若使用Select下拉列表进行状态选择，并在选中具体项值后，通过Ajax异步提交，在效果及体验上就能得到更大化的体验。下拉列表例子如下：待审核未通过审核制作中制作完成发布暂停删除错误示范：$("select#status").click(function(){console.log($...
jquery下拉框选中触发事件
03-25
### jQuery Select Change Event 示例 在处理下拉框 (`<select>`) 的选项变化时，可以通过绑定 `change` 事件来实现页面响应。以下是基于提供的引用内容以及专业知识构建的一个完整示例。 #### 绑定 `change` 事件的代码示例 通过 jQuery 提供的方法 `.on()` 或直接使用 `.change()` 来监听 `<select>` 元素的变化，并执行相应的回调函数。 ```javascript // 初始化下拉框并绑定 change 事件 $(document).ready(function () { $('#testselect').on('change', function () { const selectedValue = $(this).val(); // 获取当前选中的值 console.log(`Selected value is: ${selectedValue}`); // 打印到控制台 alert(`You have selected option with value: ${selectedValue}`); // 弹窗提示 }); }); ``` 上述代码展示了如何利用 jQuery 中的 `.on('change')` 方法监听用户的选择操作[^1]。每当用户改变下拉框的选项时，都会触发该方法内的逻辑。 如果需要动态添加新选项至下拉框，则可以结合 `.append()` 和 `.trigger('change')` 完成更新后的自动触发： ```javascript // 动态添加新选项并触发展开框的 change 事件 const newOption = $('<option>', { value: 'new-value', text: 'New Option' }); $('#testselect') .append(newOption) // 添加新的 <option> .val('new-value') // 设置为当前选中项 .trigger('change'); // 触发 change 事件 ``` 这段代码片段说明了如何向已存在的下拉菜单追加一个新的选项，并立即模拟一次选择行为以激活关联的功能[^2]。 对于更复杂的场景，例如集成第三方库 (如 Select2)，则需先完成插件初始化后再设定默认值或手动触发事件: ```javascript // 使用 Select2 插件的例子 $("#exampleSelect").select2(); // 设定默认值并通过 val 参数同步状态 $("#exampleSelect").val("bar").trigger("change"); ``` 这里提到的技术细节表明，在某些特定框架或者增强组件的情况下，除了基本的操作外还需要额外考虑其内部机制才能正确实施预期功能[^4]。 最后值得注意的是原生 JavaScript 同样支持类似的交互方式，只是 API 形式略有不同而已。例如采用标准 DOM 接口下的 addEventListener 函数也能达到同样的效果[^3]: ```javascript document.getElementById('nativeSelect').addEventListener('change', function(event){ let selection = this.value; console.info(`Native JS detected a change to "${selection}"`); }) ``` 以上就是有关于 jQuery 下拉框选中变更时触发相应动作的具体实践方案及其变体形式介绍。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值