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 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
Vue组件中slot的用法
Jan 30 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
jQuery实现评论模块
Aug 19 jQuery
VSCode插件安装完成后的配置(常用配置)
Aug 24 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与C#的值类型指向区别的详解
2013/05/21 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
简单了解python关系(比较)运算符
2019/07/08 Python
python 画图 图例自由定义方式
2020/04/17 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
标准毕业生自荐信范文
2013/11/04 职场文书
幼儿如何来做好自我评价
2013/11/05 职场文书
管道维修工岗位职责
2013/12/27 职场文书
村委会贫困证明
2014/01/14 职场文书
英语生日邀请函
2014/01/23 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
中国好声音华少广告词
2014/03/17 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
TypeScript 内置高级类型编程示例
2022/09/23 Javascript