基于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实现DIV的一些简单控制
Jun 04 Javascript
javascript new 需不需要继续使用
Jul 02 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
mailto的使用技巧分享
Dec 21 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
koa源码中promise的解读
Nov 13 Javascript
js实现消灭星星(web简易版)
Mar 24 Javascript
JS实现页面炫酷的时钟特效示例
Aug 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
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
JavaScript 私有成员分析
2009/01/13 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
深入理解React高阶组件
2017/09/28 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
Python实现线程池代码分享
2015/06/21 Python
Python数据类型详解(一)字符串
2016/05/08 Python
python实现TF-IDF算法解析
2018/01/02 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
对numpy中shape的深入理解
2018/06/15 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
Python如何实现转换URL详解
2019/07/02 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
python openCV自制绘画板
2020/10/27 Python
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
管理失职检讨书
2014/02/12 职场文书
考试作弊检讨书大全
2014/02/18 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
思想作风建设心得体会
2014/10/22 职场文书
营业用房租赁协议书
2014/11/26 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript