JQ给select的option添加点击事件

本文介绍如何在HTML中使用<select>元素时为选中的<option>项设置触发事件。通过在<select>上添加change事件监听器,可以获取到被选中的<option>值。

我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发。

想添加一个option的触发事件,在option中添加onclick 点来点去就是不会触发事件

又在select中添加onclick 这下可好了,没选option呢就触发了!!!


解决方案:  给select加一个改变事件就可以 

代码如下:

<select id="sumyear" >
<option grade="0" value="a" >请选择年份</option>
<option grade="1" value="b" >2018</option>
<option grade="2" value="c" >2019</option>

</select>

$("#sumyear").change(function(){
alert($(this).children('option:selected').val()); 
})

jQuery 的 select 元素的 option change 事件中获取 option 自定义属性,可通过绑定 change 事件来实现。 以下是不同示例下的具体代码: 示例一: ```javascript // 通过绑定 change 事件,当下拉框内容发生变化时事件被启动 $("#wlms").bind("change",function(){ // 获取自定义属性的值 var bianhao = $(this).find("option:selected").attr("bianhao"); }); ``` 在 HTML 中部分是: ```html <select id="wlms"> <option bianhao="abc"></option> </select> ``` 示例二: ```javascript // 通过绑定 change 事件,当下拉框内容发生变化时事件被启动 $("#qipa250").bind("change",function(){ // 获取已经选中的 option 自定义属性的值 var url= $(this).find("option:selected").attr("data-url"); }); ``` 对应的 select 内容: ```html <select class="form-control" name="qipa250" id="qipa250" onchange="check_qipa250()"> <option value="奇葩天地" data-url="WWW.QIPA250.COM"> 大写 </option> <option value="奇葩天地网" data-url="www.qipa250.com"> 小写 </option> </select> ``` 示例三: ```javascript $('select').change(function() { console.log($(this).find("option:selected").data('down')); }) ``` 对应的 HTML 内容: ```html <select class="form-control"> <option value="" data-down="0">Home</option> <option value="" data-down="1">News</option> </select> ``` 上述代码均展示了在 jQuery 的 select 元素的 option change 事件中获取 option 自定义属性的方法,主要是通过 `$(this).find("option:selected")` 选中当前被选中的 option,再使用 `attr()` 或 `data()` 方法获取自定义属性的值,使用 `attr()` 可获取任意自定义属性,而 `data()` 通常用于获取以 `data-` 开头的自定义属性 [^1][^2][^4]。
评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值