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 1.5最新版本的改进细节分析
Jan 19 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
JS的函数调用栈stack size的计算方法
Jun 24 Javascript
Element input树型下拉框的实现代码
Dec 21 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 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
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
用PHP编程开发“虚拟域名”系统
2006/10/09 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
5 cool javascript apps
2007/03/24 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
javascript options属性集合操作代码
2009/12/28 Javascript
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
使用JS获取当前地理位置方法汇总
2014/12/18 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
Python简单实现控制电脑的方法
2018/01/22 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
dpn网络的pytorch实现方式
2020/01/14 Python
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
三年级科学教学反思
2014/01/29 职场文书
代理协议书范本
2014/04/22 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书