javascript下拉框选项单击事件的例子分享
我本人是从事前端开发的技术人员，下拉框是我们应用的比较多的页面元素，今天我结合实际工作中遇到的问题说一下关于下拉框注册事件的一些例子，希望对大家有所帮助。
<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);
}
以上就是本文的全部内容了，希望大家能够喜欢。
-
本文向大家介绍vue.js实现单选框、复选框和下拉框示例，包括了vue.js实现单选框、复选框和下拉框示例的使用技巧和注意事项，需要的朋友参考一下 Vue.js可以很方便的实现数据双向绑定，所以在处理表单，人机交互方面具有很大的优势。下边以单选框、复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式。 一、单选框 在传统的HTML中实现单选框的方法如下： 注：这里name属性值必
-
主要内容：Struts 2 <s:select> 示例,1. 动作 - Action,2. 结果页面,3. struts.xml,5. 运行实例,参考这里创建一个Web工程：strut2selectdropdown，来演示在多个复选框如何设置的默认值，整个项目的结构如下图所示： 在Struts2，可以使用 <s:select> 标签来创建一个HTML下拉框。 产生下面的HTML代码... 其语法不需要太多解释，只不过是“headerKey”和“headerValue”。“headerKey”是一
-
本文向大家介绍js和jquery分别验证单选框、复选框、下拉框，包括了js和jquery分别验证单选框、复选框、下拉框的使用技巧和注意事项，需要的朋友参考一下 本文分别介绍了js和jQuery验证单选框(radio)、多选框(checkbox)、下拉框(select)，分享给大家供大家参考，具体内容如下 (1).首先说单选框(radio)，radio和checkbox一样都是name相同值有多个在
-
问题内容： 此处使用复选框状态更新文本框值。我用来确认取消选中的操作。如果用户选择“取消”，则复选标记会恢复，但会在确认前触发。 这会使事情处于不一致状态，并且选中复选框时文本框会显示false。 如何处理取消并保持文本框值与检查状态一致？ 问题答案： 在JSFiddle中进行了测试，可以满足您的要求。这种方法的附加好处是，当单击与复选框关联的标签时，可以触发。 更新的答案： 原始答案：
-
本文向大家介绍解决element-ui中下拉菜单子选项click事件不触发的问题，包括了解决element-ui中下拉菜单子选项click事件不触发的问题的使用技巧和注意事项，需要的朋友参考一下 将@click改为@click.native='logoutHandle';即可监听选项的点击事件。 vue使用element-ui，发现用@click事件不生效？怎么解决？ 如下所示： 今天用到elem
-
问题内容： 我有一张卡，它由页眉，正文和页脚组成，可以由更多节点组成，例如标签，文本字段等。 当 卡内 发生单击时，无论何时是卡本身还是它的子代之一，我都需要捕捉事件。现在，如果我单击文本字段，则不会触发事件。 因此，就像上面的示例一样，如果我单击文本字段键入内容，则不会打印。 问题答案： 你可以用 这里描述了JavaFX中事件处理的完整机制。简而言之，事件具有 target ，在这种情况下， t