使用Select2下拉组件时事件监听器无法触发的问题

问题根源 #

1. Select2初始化选择器错误：你使用了$("select2")，这是查找标签名为<select2>的元素，但目标下拉框的class是select2，必须用类选择器$(".select2")才能正确初始化插件。
2. 原生JS事件监听兼容性问题：Select2会替换原生select的DOM结构，原生change事件监听无法可靠触发，推荐使用jQuery绑定事件或Select2专用事件。

方案一：使用jQuery绑定原生change事件 #

这种方式兼容原生下拉和Select2插件，触发逻辑和原生一致：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<form>
  <select class="select2 form-control" name="Country" id="Country" data-live-search="true">
    <option value="Country" selected>---Select Country---</option>
    <option value="Ägypten">Ägypten (Egypt)</option>
    <option value="Argentinien">Argentinien (Argentinia)</option>
    <option value="Äthiopien">Äthiopien (Ethiopia)</option>
  </select>
</form>
<script>
$(document).ready(function() {
  // 修正选择器，正确初始化Select2
  $(".select2").select2();

  // 绑定change事件
  $("#Country").on("change", function() {
    const countryId = $(this).val();
    console.log(countryId);
    console.log("hi");
    // 在这里编写Ajax请求逻辑
    // 示例：
    // $.ajax({
    //   url: '你的接口地址',
    //   method: 'POST',
    //   data: { country: countryId },
    //   success: function(response) {
    //     // 处理返回结果
    //   }
    // });
  });
});
</script>

方案二：使用Select2专用事件select2:select #

这个事件会在用户明确选择选项时触发，能获取更多Select2专属的选项信息：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<form>
  <select class="select2 form-control" name="Country" id="Country" data-live-search="true">
    <option value="Country" selected>---Select Country---</option>
    <option value="Ägypten">Ägypten (Egypt)</option>
    <option value="Argentinien">Argentinien (Argentinia)</option>
    <option value="Äthiopien">Äthiopien (Ethiopia)</option>
  </select>
</form>
<script>
$(document).ready(function() {
  $(".select2").select2();

  // 绑定Select2专属选择事件
  $("#Country").on("select2:select", function(e) {
    const countryId = e.params.data.value;
    // 如需获取选项文本，可使用e.params.data.text
    console.log(countryId);
    console.log("hi");
    // 在这里编写Ajax请求逻辑
  });
});
</script>

内容的提问来源于stack exchange，提问作者Kunal Pandey