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選擇框，然后選擇第一個選項或任何一個選項時，我會看到警報彈出窗口。 現在我很困惑。

我嘗試將事件委托用於動態添加的元素。

$(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>

當您使用remove() jQuery函數時，它也會同時刪除select2。 因此重新初始化將為您解決。

注意 ：如果要使用選項數組，請按照以下步驟操作。

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/