基于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判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
基于JavaScript实现飘落星星特效
Aug 10 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 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
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
php的扩展写法总结
2019/05/14 PHP
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
JS变量及其作用域
2017/03/29 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
Tensorflow简单验证码识别应用
2017/05/25 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
python爬取微信公众号文章
2018/08/31 Python
Python中捕获键盘的方式详解
2019/03/28 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
什么是makefile? 如何编写makefile?
2013/01/02 面试题
麦当劳辞职信范文
2014/01/18 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
老员工辞职信范文
2015/05/12 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书