基于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页面刷新的方法收集
Jul 02 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 Javascript
JavaScript实现电灯开关小案例
Mar 30 Javascript
搭建vscode+vue环境的详细教程
Aug 31 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 项目的方法
2007/01/02 PHP
PHP 超链接 抓取实现代码
2009/06/29 PHP
PHP入门学习笔记之一
2010/10/12 PHP
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
discuz目录文件资料汇总
2014/12/30 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
Python随手笔记之标准类型内建函数
2015/12/02 Python
python基础教程项目二之画幅好画
2018/04/02 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
PyTorch学习笔记之回归实战
2018/05/28 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
python3.6的venv模块使用详解
2018/08/01 Python
pandas的相关系数与协方差实例
2019/12/27 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
环境工程大学生个人的自我评价
2013/10/08 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
维稳工作承诺书
2015/01/20 职场文书
公司慰问信范文
2015/03/23 职场文书
小王子读书笔记
2015/06/29 职场文书