做公司项目,要实现一个小需求,根据下拉框选定的数据,绑定不同的事件。我的思路是获取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. 有关SharedPreference的使用

    1.不要使你的文件过大 Sp 在创建的时候会吧整个xml问文件全部载入内存,如果你的文件比较大: 1.第一次从sp取值时,会阻塞主线程,使页面卡顿. 2.解析sp的时候会产生大量的临时对象,导致频繁G ...

  2. Codeforces Round #363 (Div. 2) D. Fix a Tree —— 并查集

    题目链接:http://codeforces.com/contest/699/problem/D D. Fix a Tree time limit per test 2 seconds memory ...

  3. Partition算法及Partition算法用于快速排序

    JavaScript简单方便,所以用JavaScript实现,可以在Chrome控制台下观察运行结果.主要实现Partition算法,比如输入为   var array = [4, 2, 1, 3, ...

  4. the art of seo(chapter one)

    preface:Andy Johns (@ibringtraffic):growth strategist@Wealthfront ***1.Search Reflecting Consciousne ...

  5. Field 'CID' doesn't have a default value

    解决:在数据库客户端navicat中设计表勾选自动递增

  6. 关于yolov3 训练输出值

    Region xx: cfg文件中yolo-layer的索引: Avg IOU:当前迭代中,预测的box与标注的box的平均交并比,越大越好,期望数值为1: Class: 标注物体的分类准确率,越大越 ...

  7. 杂项:SVN 常用方法

    ylbtech-杂项:SVN 1.返回顶部 1. bin obj *.suo*.user *.csproj.user *.o *.lo *.la *.al .libs *.so *.so.[0-9]* ...

  8. PHP错题误区

    1,$bool = TRUE;echo gettype($bool);  //这个输出类型:booleanecho is_string($bool);  //这个用echo是不能输出布尔型的,只有va ...

  9. css sprite讲解与使用实例

    转自:http://www.manongjc.com/article/886.html 一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或 ...

  10. 【网络爬虫】【java】微博爬虫(一):小试牛刀——网易微博爬虫(自定义关键字爬取微博数据)(附软件源码)

    一.写在前面 (本专栏分为"java版微博爬虫"和"python版网络爬虫"两个项目,系列里所有文章将基于这两个项目讲解,项目完整源码已经整理到我的Github ...