如何将相同的onchange事件添加到不同的选择框

Question

我想将'change'个事件添加到4个选择框中。我是使用bind()完成的。 但是我希望在更改每个选择框时调用不同的功能。 对SelectBox1 ...

的更改事件说 function1（）

  

我该怎么做？

我新到javascript＆amp; jquery，请帮忙。 谢谢

Answer 1

假设你的HTML是这样的：

<强> HTML

<select id="selectBox1">
</select>

<select id="selectBox2">
</select>

<select id="selectBox3">
</select>

<select id="selectBox4">
</select>

<强>的jQuery

$('select[id^=selectBox]').on('change', function() {

    // to get the id of current selectBox
    var selectId = this.id;

    if(selectId == 'selectBox1') {
        function1();
    } else if(selecId == 'selectBox2') {
       function2();
    }
    // and so on
});

---

更多

$('select[id^=selectBox]').on('change', function() {

        // to get the selected value
        var value = $.trim( this.value ); // $.trim() used to remove space
                                          // from beginning and end
                                          // you may not use

        // to get selected option text
        var optText = $('option:selected', this).text()


        // to get the selectedIndex
        var selIndex = this.selectedIndex;
        // OR
        var selIndex = $(this).prop('selectedIndex');
});

---

注意

在此处，select[id^=selectBox]获取选择框，其id以selectBox开头。您可能有不同的id。

.change() 用于将事件绑定到这些选择框。

了解更多关于

的信息

• 的 jQuery selectors
• 的 jQuery Events
• 的 $.trim()
• 的 .prop()

Answer 2

您可以为每个选择设置一个特定属性：

<select id="selectBox1" val='1'>
</select>

<select id="selectBox2" val='2'>
</select>

<select id="selectBox3" val='3'>
</select>

<select id="selectBox4" val='4'>
</select>

然后像这样绑定onchange事件：

  $("select").change(function(){
        var val = $(this).attr("val");
        if (val == '1')
            {
                //logic for first select change
            }
        else if (val == '2')
            {
                //logic for second select change
            }
        else if (val == '3')
            {
                //logic for third select change
            }

        // and so on...
   });

希望有所帮助。