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 相关文章推荐
js电信网通双线自动选择技巧
Nov 18 Javascript
JS对象与JSON格式数据相互转换
Feb 20 Javascript
杨氏矩阵查找的JS代码
Mar 21 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
js实现图片无缝滚动
Dec 23 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
php结合js实现多条件组合查询
May 28 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
使用refresh_token实现无感刷新页面
Apr 26 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中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
详解Node 定时器
2018/02/26 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
python简易实现任意位数的水仙花实例
2018/11/13 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
python中tab键是什么意思
2020/06/18 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
国际贸易专业推荐信
2013/11/15 职场文书
大学生村官典型材料
2014/01/12 职场文书
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
2014年市场部工作总结
2014/11/25 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
学生会自荐信
2019/05/16 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python