实现 select中指定option选中触发事件

时间:2021-07-25 11:12:08

我们在用到下拉列表框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&period;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&lpar;&rpar;方法自动触发事件

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

随机推荐

  1. Fresco 使用笔记(一):加载gif图片并播放

    项目总结 --------------------------------------------------------------------- 前言: 项目中图文混合使用的太多太多了,但是绝大部 ...

  2. 【转】开源性能测试工具 - Apache ab 介绍

    版权声明:本文可以被转载,但是在未经本人许可前,不得用于任何商业用途或其他以盈利为目的的用途.本人保留对本文的一切权利.如需转载,请在转载是保留此版权声明,并保证本文的完整性.也请转贴者理解创作的辛劳 ...

  3. The New Debugger

    在debug下有一个中文叫做杂项的选项卡下有配置的内容 里面可以配置debug的模式 有的时候一些莫名其妙的问题需要 调整里面的设置 <<SAP debug的几种方式.pdf>&gt ...

  4. crtmpserver 基本流程分析

    近期在研究crtmpserver,这里记录下学习过程,首先我们先分析下基本流程. 1.初始化流程 InitNetworking---初始化网络 Initialize Logger::Init()--- ...

  5. Matlab绘图基础——绘制三维表面

    %绘制三维表面 ------------------------------------- %1.绘制线框图:mesh:每一条曲线称为mesh line %首先利用meshgrid函数产生平面区域内的 ...

  6. Linux用户管理命令大全

    1.添加用户,首先用adduser命令添加一个普通用户,命令如下: $ adduser tommy //添加一个名为tommy的用户 $ passwd tommy //修改密码 Changing pa ...

  7. 如何解锁亚马逊A9的新算法?

    亚马逊每一次变动总能在跨境圈里掀起一场场风波,最近A9算法的更新更是牵动着不少卖家的心. A9算法是亚马逊运行的内核算法,只要消费者在亚马逊上面搜索了商品,那么他就已经开始使用了A9算法,通过分析每一 ...

  8. 【EF6学习笔记】(十一)实施继承

    上篇链接:EF学习笔记(十) 处理并发 本篇原文链接:Implementing Inheritance 面向对象的世界里,继承可以很好的重用代码.在本章就对Instructor和Student两个类进 ...

  9. 20165223《Java程序设计》第八周Java学习总结

    教材学习内容总结 第12章-JAVA多线程机制 要点 Java中的线程 Thread类与线程的创建 线程的常用方法 线程同步 协调同步的线程 线程联合 GUI线程 计时器线程 教材学习中的问题和解决过 ...

  10. java&lowbar;工厂模式

    定义: 初学者总是把所有的代码写在一个类里面,这样是非常危险的,因为所有错误集中在一个类里了,而且代码一长,调试就很困难 所以参照工厂流水线,分车间分模块来写代码,在实际操作中也就是说将代码模块化,封 ...