首页 > 代码库 > 下拉框的点击事件
下拉框的点击事件
下拉框是我们应用的比较多的页面元素，结合实际工作中遇到的问题说一下关于下拉框注册事件的一些例子，希望对大家有所帮助。$(function () { $(".events").change(function () { if ($(this).children(‘option:selected‘).val() == ‘所有事件‘) { $(".wrapper").addClass("all"); $(".wrapper").removeClass("emerency"); $(".wrapper").removeClass("normal"); } else if ($(this).children(‘option:selected‘).val() == ‘紧急事件‘) { $(".options").show(); $(".button").show(function(){ $(this).click(function(){ $(".timefly").show(); setTimeout(function(){$(".timefly").hide(function(){ // $(".wrapper").hide(); $(".three-page").show(); });},5000); }) }) // $(".wrapper").css("background-image", "url(‘img/emergency.png‘)") $(".wrapper").addClass("emergency"); $(".wrapper").removeClass("all"); $(".wrapper").removeClass("normal"); } else if ($(this).children(‘option:selected‘).val() == ‘普通事件‘) { $(".wrapper").addClass("normal"); $(".wrapper").removeClass("all"); $(".wrapper").removeClass("emergency"); } });
代码如下:
<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); }
下拉框的点击事件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。