基于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 相关文章推荐
Prototype PeriodicalExecuter对象 学习
Jul 19 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
深入浅析AngularJS中的module(模块)
Jan 04 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
JSONP原理及应用实例详解
Sep 13 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
JavaScript实现拖拽盒子效果
Feb 06 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 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
FleaPHP的安全设置方法
2008/09/15 PHP
探讨php中header的用法详解
2013/06/07 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
护理专业自荐信
2013/12/03 职场文书
应届生自荐信范文
2014/02/21 职场文书
关于环保的建议书400字
2014/03/12 职场文书
校园公益广告语
2014/03/13 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
学校捐书倡议书
2015/04/27 职场文书
针对吵架老公保证书
2015/05/08 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
《实心球》教学反思
2016/02/23 职场文书
python 破解加密zip文件的密码
2021/04/22 Python
MySQL派生表联表查询实战过程
2022/03/20 MySQL
Oracle中DBLink的详细介绍
2022/04/29 Oracle