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中校验时间格式的正则表达式小结
Sep 22 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
Nov 07 Javascript
react 路由Link配置详解
Nov 11 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
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
很棒的vue弹窗组件
2017/05/24 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
讲解Python中if语句的嵌套用法
2015/05/14 Python
Python利用ansible分发处理任务
2015/08/04 Python
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
Python常见异常分类与处理方法
2017/06/04 Python
速记Python布尔值
2017/11/09 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
什么是组件架构
2016/05/15 面试题
酒店门卫岗位职责
2013/12/29 职场文书
会计学自我鉴定
2014/02/06 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
新年祝酒词大全
2015/08/11 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers