基于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 相关文章推荐
JS 继承实例分析
Nov 04 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
查找页面中所有类为test的结点的方法
Mar 28 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 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代码
2006/12/06 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
刷新时清空文本框内容的js代码
2007/04/23 Javascript
js jquery数组介绍
2012/07/15 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
Python 字符串中的字符倒转
2008/09/06 Python
python client使用http post 到server端的代码
2013/02/10 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
Python实现的计算器功能示例
2018/04/26 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
平面设计的岗位职责
2013/11/08 职场文书
委托证明的格式
2014/01/10 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
机修工工作职责
2014/02/21 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
员工辞退通知书
2015/04/17 职场文书
捐书仪式主持词
2015/07/04 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis