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 相关文章推荐
非常不错的一个javascript 类
Nov 07 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
详解VueJS 数据驱动和依赖追踪分析
Jul 26 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 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
smarty的保留变量问题
2008/10/23 PHP
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
js中文逗号转英文实现
2014/02/11 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
python实现批量下载新浪博客的方法
2015/06/15 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
汇源肾宝广告词
2014/03/20 职场文书
安全生产管理责任书
2014/04/16 职场文书
年检委托书
2014/08/30 职场文书
土建施工员岗位职责
2015/04/11 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
python如何读取和存储dict()与.json格式文件
2022/06/25 Python