基于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对象模型-执行模型
Apr 28 Javascript
js三种排序算法分享
Aug 16 Javascript
JS跨域总结
Aug 30 Javascript
JS操作Cookie写入和读取实例代码
Oct 20 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
vue计算属性和监听器实例解析
May 10 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 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
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python获取豆瓣电影简介代码分享
2014/01/16 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
彻底理解Python中的yield关键字
2019/04/01 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
使用python绘制温度变化雷达图
2019/10/18 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
sklearn的predict_proba使用说明
2020/06/28 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
自动化专业毕业生自荐信
2013/11/01 职场文书
消防安全汇报材料
2014/02/08 职场文书
博士生求职信
2014/07/06 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
教育实习指导教师评语
2014/12/31 职场文书
聘用合同范本
2015/09/21 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
浅谈Redis的事件驱动模型
2022/05/30 Redis