javascript - 同じonchangeイベントを異なる選択ボックスに追加する方法

Question

'change'4つの選択ボックスにイベントを追加したい。私はを使用してそれを行いbind()ました。ただし、選択ボックスごとに異なる関数を呼び出したいと思います。の変更イベントでfunction1（）と言いますSelectBox1...

どうすればいいですか？

私は＆に不慣れなので、助けてください。ありがとうございましたjavascriptjquery

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]選択ボックスを取得します。あなたは何か違うものを持っているかもしれません。idselectBoxid

.change()イベントをそれらの選択ボックスにバインドするために使用されます。

についてもっと読む

• jQuery セレクター
• jQuery イベント
• $.トリム()
• .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...
   });

それが役立つことを願っています。