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>