selectedindexをオンにするイベントをトリガーしない設定

Question

selectタグのselectedindexを変更しようとしています。しかし、jqueryを介してインデックスを変更している間は、onchangeイベントは発生しません。

私はselectタグのオプションを動的に作成しています。私はoptionタグの値を知らないでしょう。

これを達成する他の方法はありますか？ ここに私のコードスニペットがあります。入力を自由にしてください。

function callFunc(obj) { 
 
    console.log(obj.value); 
 
} 
 

 
setTimeout(() => { 
 
    $("#select1")[0].selectedIndex = 2; 
 
}, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select1" onchange="callFunc(this);"> 
 
    <option value='0'>select ....</option> 
 
    <option value='1'>1</option> 
 
    <option value='2'>2</option> 
 
    <option value='3'>3</option> 
 
</select>

Answer 1

あなた自身が要素の上にchange()を呼び出して変更をトリガする必要があります。私はselectedIndexをval関数の呼び出しで置き換えました。また、マークアップではなく、javascriptを使用してイベントハンドラをアタッチします。

const select = $("#select1"); 
 

 
select.on('change', function() { 
 
    console.log(this.value); 
 
}); 
 

 
setTimeout(() => { 
 
    select.val(2).change(); 
 
}, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select1"> 
 
    <option value='0'>select ....</option> 
 
    <option value='1'>1</option> 
 
    <option value='2'>2</option> 
 
    <option value='3'>3</option> 
 
</select>

Answer 2

あなたはjQueryののトリガ機能を使用することができます。

function callFunc(obj) { 
 
    console.log(obj.value); 
 
} 
 

 

 
setTimeout(function(e){ $("#select1").val(2).trigger('change'); }, 2000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select1" onchange="callFunc(this);"> 
 
    <option value='0'>select ....</option> 
 
    <option value='1'>1</option> 
 
    <option value='2'>2</option> 
 
    <option value='3'>3</option> 
 
</select>