我们在用到下拉列表框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选中触发事件的更多相关文章

  1. LayUI中select下拉框选中触发事件

    代码: var form = layui.form, layer = layui.layer; // 监听 $(document).ready(function() { // select下拉框选中触 ...

  2. 删除select中所有option选项jquery代码

    select中所有option选项如何删除,本文使用jquery简单实现下,有此需求的朋友可以参考下,希望对大家有所帮助. 这样写 复制代码代码如下: <select id="sear ...

  3. 根据select中选定option触发不同事件

    做公司项目,要实现一个小需求,根据下拉框选定的数据,绑定不同的事件.我的思路是获取select下面的option值,然后给它们定义不同的点击事件,但是在使用中option不能添加类,同时没有click ...

  4. Vue.js之下拉列表及选中触发事件

    老早就听说了Vue.js是多么的简单.易学.好用等等,然而我只是粗略的看了下文档,简单的敲了几个例子,仅此而已. 最近由于项目的需要,系统的看了下文档,也学到了一些东西. 废话不多说,这里要说的是下拉 ...

  5. 关于select下拉框选择触发事件

    最开始使用onclick设置下拉框触发事件发现会有一些问题: <select> <option value="0" onclick="func0()&q ...

  6. denounce函数:Javascript中如何应对高频触发事件

    在DOM Event的世界中,以scroll.resize.mouseover等为代表的高频触发事件显得有些与众不同.通常,DOM事件只有在明确的时间点才会被触发,比如被点击,比如XMLHttpReq ...

  7. select下拉框选择触发事件

    我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" ...

  8. jquery新增,删除 ,修改,清空select中的option

    jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selec ...

  9. 使用jQuery中trigger()方法自动触发事件

    一.常用事件 在页面加载完成时  自动触发input的点击事件,在移动端可以实现自动弹出输入法,获得焦点 $("input").trigger("click") ...

随机推荐

  1. 自定义的Server

    自定义的Server 我们在上面对ASP.NET Core默认提供的具有跨平台能力的KestrelServer进行了详细介绍(<聊聊ASP.NET Core默认提供的这个跨平台的服务器——Kes ...

  2. 运行复制的ZooKeeper 部署

    运行复制的ZooKeeper 运行ZooKeeper 在一个独立模式下是方便评估的, 一些开发,和测试. 但是在生产,你应该运行ZooKeeper 在复制模式.一个复制的servers group 在 ...

  3. Hadoop在Windows下的安装配置

    由于本人近期近期一段时间 都在学习Hadoop,接触了比較多的理论,可是想要深入的去学习Hadoop整个平台,那就必须实战的训练,首先第一步,当然是先搭建好一个Hadoop平台为先.可是比較坑爹的是. ...

  4. Linux笔记——linux下的语音合成系统

    1.festival 安装:sudo apt-get install festival 使用: (SayText "Hello!") 2. espeek(ubuntu 自带) # ...

  5. POJ 1287:Networking(最小生成树Kruskal)

    id=1287">Networking Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 5976   Acce ...

  6. 20款Notepad++插件下载和介绍

    转自:http://www.kuqin.com/developtool/20090628/59334.html Notepad++从3.4版本开始支持插件机制,让用户可选择的为本身已经优秀的Notep ...

  7. 使用开源的PullToRefreshScrollView scrollTo和scrollby遇到的问题

    在项目中使用了开源的com.handmark.pulltorefresh.library 下拉刷新组件,当中使用了PullToRefreshScrollView ,须要调用scrollTo或者scro ...

  8. [Boost基础]并发编程——asio网络库——同步socket处理

    网络通信简述 asio库支持TCP,UDP和ICMP通信协议,它在名字空间boost::asio::ip里提供了大量的网络通信方面的函数和类,很好的封装了原始的Berkeley Socket API, ...

  9. POJ - 1422 Air Raid 二分图最大匹配

    题目大意:有n个点,m条单向线段.如今问要从几个点出发才干遍历到全部的点 解题思路:二分图最大匹配,仅仅要一条匹配,就表示两个点联通,两个点联通仅仅须要选取当中一个点就可以,所以有多少条匹配.就能够减 ...

  10. vs2010中将复制过来的文件或文件夹显示到解决方案管理

    今天在给一个做好的页面上加.net程序,我先将程序中的文件夹复制到解决方案中,可是在VS2010的解决方案资源管理器中并没有这样的文件夹,可明明 在这里,为什么显示不出来,应该在VS2010的哪个地方 ...