javascript下拉框选项单击事件的例子分享


Posted in Javascript onMarch 04, 2015

我本人是从事前端开发的技术人员,下拉框是我们应用的比较多的页面元素,今天我结合实际工作中遇到的问题说一下关于下拉框注册事件的一些例子,希望对大家有所帮助。

<select name="" id="sel">


<option value="111">1</option>


<option value="222">2</option>


<option value="333">3</option>

</select>

以上是一段非常简单的单选下拉框代码,如果我们要通过单击下拉选项获取对应的value,大致的代码如下:

var sel=document.getElementById("sel");

var option=sel.options;

for(var i=0;i<option.length;i++){


option[i].onclick=function(){



alert(this.text);//获取下拉选项的文本值



alert(this.value);//获取下拉选项的value值


}

}

 以上代码在ie9以下以及chrome上不能产生预期效果,在Firefox上有效。针对这种情况,不建议在option选项上绑定click事件,建议利用change事件来代替,因为change是通用的,从本质上看来就是change。

var sel=document.getElementById("sel");

sel.onchange=function(){


alert(sel.options[sel.selectedIndex].value);

} 

以上就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
jquery select操作的日期联动实现代码
Dec 06 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
javascript 节点排序 2
Jan 31 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 #Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 #Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 #Javascript
javascript 动态创建表格的2种方法总结
Mar 04 #Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 #Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 #Javascript
百度地图自定义控件分享
Mar 04 #Javascript
You might like
PHP程序员编程注意事项
2008/04/10 PHP
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
解析左右值无限分类的实现算法
2013/06/20 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
pycharm远程调试openstack的图文教程
2017/11/21 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
python 连续不等式语法糖实例
2020/04/15 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
人事助理岗位职责
2013/11/18 职场文书
大学生最新职业生涯规划书范文
2014/01/12 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
go语言中http超时引发的事故解决
2021/06/02 Golang
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL