基于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 相关文章推荐
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
select下拉框插件jquery.editable-select详解
Jan 22 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
vue中如何添加百度统计代码
Dec 19 Vue.js
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
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
php数组去除空值函数分享
2015/02/02 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
python实现批量修改文件名代码
2017/09/10 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
信息专业大学生自我评价分享
2014/01/17 职场文书
医科大学毕业生自荐信
2014/02/03 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
单位车辆管理制度
2015/08/05 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python