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/