根据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 ...
随机推荐
- android通过DialogFragment实现时间选择
在android开发中,时间控件是不可或缺的一部分,特别是在设置个人生日或按时间进行搜索时都要用到.Android有内置的DatePicker和timePicker,使用起来也是相当的方便,既可以在布 ...
- iOS 开发中的一些注意点(安全、当前语言、时间格式化)
1.重复运行项目,不重复构建项目(来自Heath Borders) 假如你一直在不停地调试同一个问题,你可以在不重复构建的情况下运行你的APP,这样:“Product>Perform Actio ...
- 【React系列】Props 验证
Props 验证使用 propTypes,它可以保证我们的应用组件被正确使用,React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效.当向 props 传入无效 ...
- extjs grid renderer参数用法
今天在导出EXT的二维时老是报错,追进去看是renderer : function(value)的参数不对,经过一番研究,未免以后遇到再次浪费时间,记录一下. var cm = new Ext.gri ...
- 在一个form表单中根据不同按钮实现多个action事件
<form id="writeForm" method="post"> <div class="write-btn-tj" ...
- Splay模板(序列终结者)
我只是一个存模板的,详细的请看这里http://blog.csdn.net/whai362/article/details/47298133 题目链接:http://www.codevs.cn/pro ...
- fhq-treap简介
\(fhq-treap\)是个好东西啊!无旋转\(treap\)果然是好写,而且还是比较好理解的. 这种数据结构是由神犇fhq发明的.\(Think\ functional!\) fhq神犇说,函数式 ...
- Activity参数传递
简单数据传递 putExtra() 传递 findViewById(R.id.button).setOnClickListener(new View.OnClickListener() { @Over ...
- bzoj2117
动态电分治+二分 肯定要枚举所有点对,那么我们建出点分树降低树高,然后每个点存下点分树中所有子树到这个点的距离,然后二分+lower_bound就行了. #include<bits/stdc++ ...
- 页面跳转问题,多次 push 到新的页面的问题的解决方法
今日在做一个扫一扫的功能,突然发现多次点击了扫一扫的图片后,造成多次触发轻拍手势,就多次push到新的页面,本想在轻拍手势内对push的进行拦截,但是又觉得如果有好多的地方都要实现对该问题的解决岂不是 ...