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

html代码:

<select id="sel" name="selectType" onchange="typeChange()">
<option on="1" value="事件1">事件1</option>
<option on="2" value=“事件2”>事件2</option>
</select>

js代码:

function typeChange(){
//获取select对象
var myItem = document.getElementById("sel");
//获取select中选中的那个option对象,并取得区分的on属性的值
var myOption = myItem.options[myItem.selectedIndex].getAttribute('on');
//根据获取到的不同属性值,来指定不同事件
if(myOption == '1'){
//代码块1
}
if(myOption == '2'){
//代码块2
}
)

  以上代码在执行的时候,有可能触发不到onchange事件,那么这个时候还可以用另一种绑定事件的方法:

$("#sel").bind("change",function(){
var myItem = document.getElementById("sel");
var myOption = myItem.options[myItem.selectedIndex].getAttribute('on');
if(myOption == '1'){
//代码块1
}
if(myOption == '2'){
//代码块2
}
})

根据select中选定option触发不同事件的更多相关文章

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

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

  2. js jq输入框中按回车触发提交事件,用户在页面输入后按回车(Enter键)进行

    js jq输入框中按回车触发提交事件,用户在页面输入后按回车(Enter键)进行 代码如下: <!DOCTYPE html> <html lang="en" xm ...

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

    我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. ...

  4. HTML Select 标签选择后触发jQuery事件代码实例

    页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...

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

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

  6. jQuery获取select中全部option值

    <select id="language"> <option value="">请选择</option> <optio ...

  7. 删除select中所有option选项

    这样写 <select id="search"> <option>baidu</option> <option>sogou</ ...

  8. vue select中的option循环的时候,要使用 :value,不能使用 v-model

    <select class="classColor" @change="select" v-model="selectValue"&g ...

  9. Vue.js,select中的option用ajax想循环控制值的显示 v-model可以实现但提示报错,这是为什么?

    应该将v-model换成:value,因为v-model只能绑定一个值,无法绑定多个值 <select v-model="citys">       <optio ...

随机推荐

  1. [RK3288][Android6.0] 调试笔记 --- 替换系统签名【转】

    本文转载自:http://blog.csdn.net/kris_fei/article/details/55100299 Platform: RK3288OS: Android 6.0Kernel: ...

  2. user版本如何永久性开启adb 的root权限【转】

    本文转载自:http://blog.csdn.net/o0daxu0o/article/details/52933926 [Solution]* adb 的root 权限是在system/core/a ...

  3. centos6.5 mysql 5.6修改root密码,以及创建用户并授权

    mkdir -p mysql_home/{data,temp,undologs,logs} chown -R mysql:mysql /dbfiles/mysql_home mysql_install ...

  4. BZOJ 1628 [Usaco2007 Demo]City skyline:单调栈

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1628 题意: 题解: 单调栈. 单调性: 栈内元素高度递增. 一旦出现比栈顶小的元素,则表 ...

  5. 并不对劲的CTS2019

    day0 没有C day1 t1:并不想简述题意 10分暴力走人 t2:有\(n\)个在\([1,D]\)内的均匀随机整数,问有多少的概率出现\(m\)对相同的 设\(f(i,j)\)表示考虑前\(i ...

  6. GitHub的使用方法

    版本控制系统 > Git 分布式 > Subversion 集中式 1. 安装git: # apt-get install git //root权限 $ sudo apt-get inst ...

  7. FFmpeg在Linux下搭建 ***

    今天介绍下FFmpeg在Linux下安装编译过程,总体过程比较顺利,就是在ffmpeg等的时间稍长点,仅当记录. 关于FFmpeg FFmpeg是一个开源免费跨平台的视频和音频流方案,属于自由软件,采 ...

  8. AndroidStudio检测不到genymotion虚拟设备

    重启adb 单击  Reset adb

  9. CodeForces 1091G. New Year and the Factorisation Collaboration

    题目简述:若你获得“超能力”:固定$n$,对任意$a$,可以快速求出$x \in [0, n)$(若存在),使得$x^2 \equiv a \pmod n$,若存在多个$x$满足条件,则返回其中一个( ...

  10. Linux系统如何查看版本信息?

    查看版本号 我在Ubuntu下做测试 1 命令行执行 cat /etc/issue  (切记cat后要空一格)即可看到版本信息. 2 登录linux,在终端输入 cat /proc/version  ...