Select2 不会在更改/选择第一个选项时触发

Posted 2023-05-07

【中文标题】Select2 不会在更改/选择第一个选项时触发

【英文标题】：Select2 doesn't trigger on change/selection of first option

【发布时间】：2016-10-20 23:18:45

【问题描述】：

我在做什么：当模式弹出窗口打开时，动态地向选择框添加选项。并等待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

【参考方案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>

【讨论】：

谢谢，这行得通。但是你能解释一下为什么需要将空 val 设置为选择框吗？我真的很想知道

那是重置选择框的值，这样就可以触发一个change事件。

【参考方案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/

【讨论】：

不，注释掉 $('#query_product').find('option').remove() .. 结果还是一样

您尝试重新初始化它吗？ $('#query_product').append(options).select2(); 而不是删除 $('#query_product').find('option').remove() ?

让我为你制作一个小提琴。

现在试过了。结果相同：|

我已经更新了答案以及小提琴链接。试试看吧。