基于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 相关文章推荐
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
禁用Enter键表单自动提交实现代码
May 22 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 Javascript
详解JS模块导入导出
Dec 20 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
Vue.js 图标选择组件实践详解
Dec 03 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
javascript实现下拉菜单效果
Feb 09 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实现多级树型菜单
2006/10/09 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
基于jQuery选择器的整理集合
2013/04/26 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
Python解惑之整数比较详解
2017/04/24 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
大学运动会通讯稿
2014/01/28 职场文书
大学生新学期计划书
2014/04/28 职场文书
建筑结构施工求职信
2014/07/11 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
处理canvas绘制图片模糊问题
2022/05/11 Javascript