实现 select中指定option选中触发事件
我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发。
当我们触发select的双击事件时,用ondblclick方法。
当我们要取得select的选中事件时,用document.all['name'].value来获取,其中name是select的名称。
如果我们要得到select的全部的值就用一个for循环来实现。代码如下:
var vi = document.all['list'].length;
for(var i=;i<vi;i++){
document.form2.list(i).value; //form2是<form>的名称
}
下面介绍一个特殊情况的解决,由于option本身没有事件,所以我们不能给每个option都添加一个onclick事件。如果需要实现点击不同的option,实现不同的函数时,要怎么办,从value里取值在分析是一种办法,但如果value里的值不确定,我们又不想从value里取值怎么办呢?可以这样解决,给每个option添加一个属性,然后在赋一个值,我们在函数里取到这个属性的值就可以判断执行了。
<select id="pid" onchange="gradeChange()">
<option grade="" value="a">选项一</a>
<option grade="" value="b">选项二</a>
</select>
<script type="text/javascript">
function gradeChange(){
var objS = document.getElementByIdxx_x("pid");
var grade = objS.options[objS.selectedIndex].grade;
alert(grade);
}
</script>
实现 select中指定option选中触发事件的更多相关文章
- LayUI中select下拉框选中触发事件
代码: var form = layui.form, layer = layui.layer; // 监听 $(document).ready(function() { // select下拉框选中触 ...
- 删除select中所有option选项jquery代码
select中所有option选项如何删除,本文使用jquery简单实现下,有此需求的朋友可以参考下,希望对大家有所帮助. 这样写 复制代码代码如下: <select id="sear ...
- 根据select中选定option触发不同事件
做公司项目,要实现一个小需求,根据下拉框选定的数据,绑定不同的事件.我的思路是获取select下面的option值,然后给它们定义不同的点击事件,但是在使用中option不能添加类,同时没有click ...
- Vue.js之下拉列表及选中触发事件
老早就听说了Vue.js是多么的简单.易学.好用等等,然而我只是粗略的看了下文档,简单的敲了几个例子,仅此而已. 最近由于项目的需要,系统的看了下文档,也学到了一些东西. 废话不多说,这里要说的是下拉 ...
- 关于select下拉框选择触发事件
最开始使用onclick设置下拉框触发事件发现会有一些问题: <select> <option value="0" onclick="func0()&q ...
- denounce函数:Javascript中如何应对高频触发事件
在DOM Event的世界中,以scroll.resize.mouseover等为代表的高频触发事件显得有些与众不同.通常,DOM事件只有在明确的时间点才会被触发,比如被点击,比如XMLHttpReq ...
- select下拉框选择触发事件
我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" ...
- jquery新增,删除 ,修改,清空select中的option
jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selec ...
- 使用jQuery中trigger()方法自动触发事件
一.常用事件 在页面加载完成时 自动触发input的点击事件,在移动端可以实现自动弹出输入法,获得焦点 $("input").trigger("click") ...
随机推荐
- ZOJ 3607贪心算法
http://blog.csdn.net/ffq5050139/article/details/7832991 http://blog.watashi.ws/1944/the-8th-zjpcpc/ ...
- 获取操作系统版本Asp.Net
/// <summary> /// 获取操作系统版本号 /// </summary> /// <returns></returns> public st ...
- C++ 檔案、資料夾、路徑處理函式庫:boost::filesystem
原帖:https://tokyo.zxproxy.com/browse.php?u=uG7kXsFlW1ZmaxKEvCzu8HrCJ0bXIAddA1s5dtIUZ%2FYzM1u9JI7jjKLT ...
- WM_PAINT消息在窗口重绘的时候产生,那什么时候窗口会重绘(异步工作方式效率高、灵活性强,还有UpdateWindow和RedrawWindow帮忙)
Q:wm_paint消息在窗口重绘的时候产生,那什么时候窗口会重绘?? A: 严格地说,只有当收到WM_PAINT消息后窗口会重绘 但是引起这个消息的事件有很多, 比如:1.首次创建 2.移动 3.改 ...
- android studio 怎么运行java
方法/步骤 1.新建一个project,或者如果已经有project的话,那就直接新建一个module.注意选择Java library,然后下一步 2.输入module的一些信息.点击finish ...
- 基于visual Studio2013解决C语言竞赛题之1050矩阵反斜线求和
题目 解决代码及点评 /************************************************************************/ /* 50 ...
- JS Call()与Apply()
JS Call()与Apply() ECMAScript规范给所有函数都定义了Call()与apply()两个方法,call与apply的第一个参数都是需要调用的函数对象,在函数体内这个参数就是thi ...
- [置顶] Windows Phone后台音乐详解一
应用于: Windows Phone 8 | Windows PhoneOS 7.1 你可以为winphone编写在后台播放音乐的app.这表示即使当用户点击返回或开始按钮离开你的应用界面时,你的应用 ...
- QCompleter自动补全
知识永远是那么多,想到什么就总结什么,今天记录一下关于我对QComplete的一些小见解. 官方文档中叙述如下: 可以在任何Qt的窗口小部件中使用QCompleter提供自动补全功能,如 ...
- PHP学习之-1.7 注释
注释 在PHP中也有注释语句:用双斜杠 "//" 来表示.其他语言中 HTML使用 "<!-- -->" ,CSS中使用 "/* ...