基于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入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
Sep 01 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
vue项目中实现缓存的最佳方案详解
Jul 11 Javascript
vue多个元素的样式选择器问题
Nov 29 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 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连接Oracle数据库
2006/10/09 PHP
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
轻松实现php文件上传功能
2017/02/17 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
原生js开发的日历插件
2017/02/04 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
pyqt和pyside开发图形化界面
2014/01/22 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
jupyter notebook清除输出方式
2020/04/10 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
英语感恩演讲稿
2014/01/14 职场文书
五型班组建设方案
2014/02/10 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
销售代理协议书
2014/09/30 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
担保书范文
2019/07/09 职场文书
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL