Select2 不会在第一个选项的 change/selection 上触发

Question

我在做什么：当模式弹出窗口打开时，动态地向 select 框添加选项。并等待 on change 触发器响应。

Observation：它弹出除第一个选项之外的所有选项的警告框。下面是代码。

$("#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 框然后 select 第一个选项或任何选项时，我看到警报弹出窗口。现在我很困惑。

我尝试对动态添加的元素使用事件委托。

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

似乎没有任何效果。任何帮助将不胜感激。 TIA

Answer 1

这是你做的有点不对。

['<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);

这里有一个 Fiddle 可能会有所帮助 https://jsfiddle.net/imrealashu/61tvh76t/3/

Answer 2

试试这个：

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

Select2 不会在第一个选项的 change/selection 上触发

Select2 doesn't trigger on change/selection of first option

javascript

jquery

jquery-select2

select2-rails

select2