Select2は最初のオプションの変更/選択時にトリガーしません

Question

私がしていること：モーダルポップアップが開くと、選択ボックスにオプションを動的に追加します。そして、on changeトリガーが応答するのを待つ。

観測：すべてのオプションの警告ボックスが最初に表示されます。 以下はそのコードです。

$("#query_product").on("change", function(e){ 
    alert(1) 
}); 

$("#add_condition_modal").on("shown.bs.modal", function() { 
    options = ['<option>one</option>','<option>two</option>','<option>three</option>'] 
    $('#query_product').find('option').remove() 
    $('#query_product').append(options); 
}); 

<select id="query_product" name="query_product" required></select> 

別の観察：私は同じオプションを持つHTMLのselectボックスを事前入力してから最初のオプションまたはいずれかのオプションを選択した場合、私は警告ポップアップを参照してください。 今私は混乱しています。

動的に追加された要素にイベントデリゲートを使用しようとしました。

$(document).on("change","#query_product", function() { 

何も動作していないようです。どんな助けもありがとう。 TIA

Answer 1

はこれを試してみてください役立つかもしれないフィドルです：。

$("#query_product").on("change", function(e){ 
    alert(1) 
}); 

$("#add_condition_modal").on("shown.bs.modal", function() { 
    options = ['<option value="one">one</option>','<option value="two">two</option>','<option value="three">three</option>'] 
    $('#query_product').find('option').remove(); 
    $('#query_product').append(options); 
    $('#query_product').val(""); 
}); 

<select id="query_product" name="query_product" required></select> 

Answer 2

ここでは、間違っていると思います。

['<option>one</option>','<option>two</option>','<option>three</option>']
文字列を使用することをおすすめします。

$("#query_product").on("change", function(e){ 
    alert(1) 
}); 

$("#add_condition_modal").on("shown.bs.modal", function() { 
    options ='<option>one</option><option>two</option><option>three</option>'; 
    $('#query_product').html(options); 
}); 

<select id="query_product" name="query_product" required></select> 

あなたはそれは同様SELECT2を削除remove() jQueryの機能を使用しています。 あなたのために再初期化が修正されるでしょう。

注：オプションの配列を使用する場合は、このようにします。

var options = ['first_option','second_option','third_option']; 
var optionString = ''; 
    for(var i = 0; i< options.length; i++){ 
     optionString += '<option>'+options[i]+'</option>'; 
    } 
then $('#selector').html(optionString); 

ここ https://jsfiddle.net/imrealashu/61tvh76t/3/