javascript下拉框选项单击事件的例子分享

网络编程 JavaScript javascript技巧 分类:[default] 更新日期: 2015-12-10
这篇文章主要分享了一些javascript下拉框选项单击事件的例子,以及在例子中遇到的问题的解决方法,十分实用,推荐给小伙伴们参考下。

我本人是从事前端开发的技术人员,下拉框是我们应用的比较多的页面元素,今天我结合实际工作中遇到的问题说一下关于下拉框注册事件的一些例子,希望对大家有所帮助。

代码如下:

<select name="" >
<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);
}

以上就是本文的全部内容了,希望大家能够喜欢。


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • BootStrap使用popover插件实现鼠标经过显示并保持显示框
    BootStrap使用popover插件实现鼠标经过显示并保持显示框
    这篇文章主要介绍了BootStrap使用popover插件实现鼠标经过显示并保持显示框的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下在商城里,导航栏的购物车展示经常需要鼠标经过时,显示已经放入购物车的商品,bootstrap是没有直接用的插件的,这个时候就可以使用popover这个插件改造后实现,具体如下: 实现效果图: html实现: < ...
  • HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
    本文主要介绍HTML5实战与剖析之触摸事件,介绍的比较详细,需要的朋友可以参考下. HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主要是触摸事件:touchstart.touchmove和touchend. ...
  • Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
    Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
    这篇文章主要介绍了Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下今天项目经理刚交给一个活儿,要我实现这样一个功能:要实现的是验证码文本框变窄一点,然后右边加入一副验证码图片,并且在响应式布局的情况下在移动端访问的时候验证码图片能保持和验证码文本框在同一行,这个怎么做?难为了半天 ...
  • JavaScript中的正则表达式(推荐)
    正则表达式通常用于在文本中查找匹配的字符串,js正则表达式在程序开发中应用非常广泛,本文给大家介绍JavaScript 中的正则表达式推荐,感兴趣的朋友一起学习吧正则表达式的大致匹配过程是:依次拿出表达式和文本中的字符比较,如果每一个字符都能匹配,则匹配成功:一旦有匹配不成功的字符则匹配失败. 正则表达式通常用于在文本中查找匹配的字符串.Python里数量词 ...
  • asp.net及javascript判断是否手机访问的方法
    这篇文章主要介绍了asp.net及javascript判断是否手机访问的方法,结合实例形式对比分析了asp.net及javascript实现判断访问端类型的相关技巧,需要的朋友可以参考下本文实例讲述了asp.net及javascript判断是否手机访问的方法.分享给大家供大家参考,具体如下: /// <summary> /// 判断手机用户Use ...
  • 完美解决jsp页面在IE8下文本模式自动为(杂项Quirks)导致页面显示错位
    完美解决jsp页面在IE8下文本模式自动为(杂项Quirks)导致页面显示错位
    下面小编就为大家带来一篇完美解决jsp页面在IE8下文本模式自动为杂项Quirks导致页面显示错位.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧最近在修改网站的响应式的页面时,由于都是套样式页面,修改过程都是粘贴复制,导致了一些细节问题在IE8下暴露出来: 遇到的问题就是在在Chrome,火狐页面都正常,唯独在IE8下页面样式 ...
猜你喜欢