根据select中选定option触发不同事件
做公司项目,要实现一个小需求,根据下拉框选定的数据,绑定不同的事件。我的思路是获取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触发不同事件的更多相关文章
- 删除select中所有option选项jquery代码
select中所有option选项如何删除,本文使用jquery简单实现下,有此需求的朋友可以参考下,希望对大家有所帮助. 这样写 复制代码代码如下: <select id="sear ...
- js jq输入框中按回车触发提交事件,用户在页面输入后按回车(Enter键)进行
js jq输入框中按回车触发提交事件,用户在页面输入后按回车(Enter键)进行 代码如下: <!DOCTYPE html> <html lang="en" xm ...
- 实现 select中指定option选中触发事件
我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. ...
- HTML Select 标签选择后触发jQuery事件代码实例
页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...
- jquery新增,删除 ,修改,清空select中的option
jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selec ...
- jQuery获取select中全部option值
<select id="language"> <option value="">请选择</option> <optio ...
- 删除select中所有option选项
这样写 <select id="search"> <option>baidu</option> <option>sogou</ ...
- vue select中的option循环的时候,要使用 :value,不能使用 v-model
<select class="classColor" @change="select" v-model="selectValue"&g ...
- Vue.js,select中的option用ajax想循环控制值的显示 v-model可以实现但提示报错,这是为什么?
应该将v-model换成:value,因为v-model只能绑定一个值,无法绑定多个值 <select v-model="citys"> <optio ...
随机推荐
- Spring 4.2框架中注释驱动的事件监听器详解
事件交互已经成为很多应用程序不可或缺的一部分,spring框架提供了一个完整的基础设施来处理瞬时事件.下面我们来看看Spring 4.2框架中基于注释驱动的事件监听器. 1.早期的方式 在早期,组件要 ...
- 配置composer代理
composer config -g repo.packagist composer https://packagist.phpcomposer.com
- python多进程执行任务
https://blog.csdn.net/qq_39694935/article/details/84552076 [Python]multiprocessing Pool 进程间通信共享 直接上代 ...
- 谈谈javaScript
谈谈javaScript (杰我学习) 一. 什么是JavaScript 人们通常所说的JavaScript,其正式名称为ECMAScript.这个标准由ECMA组织发展和维护.ECMA ...
- Linux下监控网卡流量的软件iftop
官网上说使用iftop需要libpcap和libcurses这两个包. 用命令查找了一下 # rpm -qa | grep libpcap libpcap-0.9.4-15.el5 只找到了这个,缺 ...
- Java笔记(七)
File类: import java.io.File; import java.io.IOException; public class Demo{ public static void main(S ...
- [APIO 2010] 特别行动队
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1911 [算法] 设前i个士兵"修正"后的最大战斗力为fi 令su ...
- OTL之Oracle开发总结《转》
OTL之Oracle开发总结---转 关 于OTL,网上介绍的也不少,但看来看去也只是官方的那些文档.OTL很好用,结合官方提供的一些例子,多多尝试才能领悟.经过一个月左右的项目开发,对 OTL也 ...
- docker容器的参数如何指定配额
docker容器的参数如何指定配额 1. 内存 现在让我看下内存限制. 第一件事需要注意的是,默认一个容器可以使用主机上的所有内存. 如果你想为容器中的所有进程限制内存,使用docker run命令的 ...
- C# 使用WebClient时,在多网卡时,指定IP发送Web请求
需要定义一个类,重写GetWebRequest,在方法内,指定IP地址 public class MyWebClient : WebClient { private IPAddress ipAddre ...