基于jQuery的select下拉框选择触发事件实例分析


Posted in Javascript onNovember 18, 2016

本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法。分享给大家供大家参考,具体如下:

我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下:

<select>
  <option value="0" onclick="func(0)">选项一</option>
  <option value="1" onclick="func(1)">选项二</option>
</select>

今天有个要求需要做联动菜单,就是每点一次,相邻的下拉框会自动改变 ,我一想没问题啊,onclick走起

于是走上面的路线,客户还说了,IE8必须支持,我想想也是,XP的IE内核只能升到IE8,现在很多用户依然舍不得XP,但是它支持onclick啊,我在ff下试过了,一点问题没有,但是一切换IE8下,告诉你,一点反应没有。

然后多方查找资料,原来select 它的事件是注册在自己标签上的,不是onclick,而是onchange,子标签对低版本浏览器无效,而且也不是正规标准的写法。

<select onchange="func()>
  <option value="0" >选项一</option>
  <option value="1" >选项二</option>
</select>

好,问题又来了,我传的参数怎么办?怎么接收参数
这不是问题,jQuery给你答案

function func(){
 //获取被选中的option标签
 var vs = $('select option:selected').val();
}

当然这里的 select 最好加个id 以便混淆,ok,问题解决,涨姿势了木有呢,哈哈。。。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
form中限制文本字节数js代码
Jun 10 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
jquery高效反选具体实现
May 05 Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 Javascript
vue如何使用外部特殊字体的操作
Jul 30 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 #Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 #Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 #Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 #Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 #Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 #Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 #Javascript
You might like
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
机电一体化专业推荐信
2013/12/03 职场文书
《狼》教学反思
2014/03/02 职场文书
社区禁毒工作方案
2014/06/02 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python