根据select中选定option触发不同事件

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

html代码：

<select >
    <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触发不同事件

相关推荐