Select2组件trigger事件不触发问题求助

通过jQuery为id为paySelect的Select2下拉框设置值后，打开下拉框时该值仅高亮显示但未触发选中状态；点击高亮选项无任何响应，必须先点击其他选项再返回点击，trigger事件才会触发。

尝试过的触发方式：

• $("#paySelect").val("2").trigger('change');
• $("#paySelect").val("1").trigger('change.select2');
• $("#paySelect").val("1").change();

关键现象：以上操作在Chrome控制台中可正常执行，但在项目代码中无效。当前使用Select2版本为4.0.6-rc.1。

相关HTML代码 #

初始Select代码 #

<select name="paySelect" id="paySelect" class="form-control select2-hidden-accessible" data-select2-id="paySelect" tabindex="-1" aria-hidden="true">
    <option value="" data-select2-id="2">Select Payment Mode</option>
    <option value="1" data-select2-id="19">Cash on Delivery</option>
    <option value="2" data-select2-id="18">Prepaid</option>
</select>

实际场景代码 #

<div class="col-md-4 payment_mode_list">
  <select name="paySelect" id="paySelect" class="form-control select2-hidden-accessible" data-select2-id="paySelect" tabindex="-1" aria-hidden="true">
    <option value="" data-select2-id="8">Select Payment Mode</option>
    <option value="1" data-select2-id="83">COD(Cash on Delivery)</option>
    <option value="2" data-select2-id="84">Prepaid</option>
  </select><span class="select2 select2-container select2-container--default select2-container--below select2-container--open select2-container--focus" dir="ltr" data-select2-id="7" style="width: 100%;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-payment_mode_id-container" aria-owns="select2-payment_mode_id-results"><span class="select2-selection__rendered" id="select2-payment_mode_id-container" role="textbox" aria-readonly="true" title="Select Payment Mode">Select Payment Mode</span>
  <span
    class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
    </span>
    </span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
    <div class="payment_mode_id_error error_msg"></div>
</div>

Select2展开时自动生成的代码 #

<span class="select2-container select2-container--default select2-container--open" style="position: absolute; top: 1087.38px; left: 130px;"><span class="select2-dropdown select2-dropdown--below" dir="ltr" style="width: 321px;"><span class="select2-search select2-search--dropdown"><input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="textbox"></span>
<span
  class="select2-results">
  <ul class="select2-results__options" role="tree" id="select2-payment_mode_id-results" aria-expanded="true" aria-hidden="false">
    <li class="select2-results__option select2-results__option--highlighted" role="treeitem" aria-selected="true" data-select2-id="85">Select Payment Mode</li>
    <li class="select2-results__option" id="select2-payment_mode_id-result-tva6-1" role="treeitem" aria-selected="false" data-select2-id="select2-payment_mode_id-result-tva6-1">COD(Cash on Delivery)</li>
    <li class="select2-results__option" id="select2-payment_mode_id-result-kust-2" role="treeitem" aria-selected="false" data-select2-id="select2-payment_mode_id-result-kust-2">Prepaid</li>
  </ul>
  </span>
  </span>
  </span>

针对Select2 4.0.x版本的这类状态同步问题，推荐以下排查和解决方式：

1. 确保代码在Select2初始化完成后执行 #

项目代码无效但控制台有效，核心原因大概率是设置值的逻辑早于Select2初始化。可将设置值的代码放在初始化回调或DOM完全加载后执行：

$(document).ready(function() {
  // 先初始化Select2
  $('#paySelect').select2();
  // 再设置值并触发事件
  $('#paySelect').val('2').trigger('change.select2');
});

2. 使用Select2原生API设置值 #

直接调用Select2的val方法，能更可靠地同步UI和数据状态：

$('#paySelect').select2('val', '2').trigger('change');

3. 处理下拉框展开状态的冲突 #

如果设置值时下拉框处于展开状态，会导致状态不同步。可先关闭下拉框再设置值：

// 先关闭Select2下拉框
$('#paySelect').select2('close');
// 设置值并触发事件
$('#paySelect').val('2').trigger('change.select2');
// 如需重新展开，调用open
$('#paySelect').select2('open');

4. 手动触发原生事件同步状态 #

若存在其他代码阻止事件冒泡，可手动触发原生change事件再同步Select2：

var $select = $('#paySelect');
$select.val('2');
// 触发原生change事件
$select[0].dispatchEvent(new Event('change'));
// 同步Select2状态
$select.trigger('change.select2');

5. 升级Select2版本 #

4.0.6-rc.1是候选版本，存在已知的状态同步bug。建议升级到稳定版（如4.0.13），多数类似问题已在稳定版中修复。

内容的提问来源于stack exchange，提问作者D Shah