基于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 相关文章推荐
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
js常用DOM方法详解
Feb 04 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
解析Vue.js中的组件
Feb 02 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 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
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
jquery提升性能最佳实践小结
2010/12/06 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
让python json encode datetime类型
2010/12/28 Python
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
python编程羊车门问题代码示例
2017/10/25 Python
python解析xml简单示例
2019/06/21 Python
Python图片的横坐标汉字实例
2019/12/04 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
python正则表达式实例代码
2020/03/03 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
如何清空Session
2015/02/23 面试题
大学生自荐信
2013/12/11 职场文书
自我反省检讨书
2014/01/23 职场文书
优秀通讯员事迹材料
2014/01/28 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
2016特色励志班级口号
2015/12/24 职场文书
python前后端自定义分页器
2022/04/13 Python