HTML表单select添加id后 绑定Select2的下拉框无法重置

这个现象和select的id属性本身没有关系：

1. Select2 插件初始化时会隐藏原生<select>元素，在页面上生成自定义的下拉DOM结构来实现交互效果，插件本身通过监听原生select的change事件，同步原生值和自定义UI的显示状态。
2. 浏览器原生的表单reset逻辑只会把原生表单元素的值恢复为初始默认值，不会主动触发元素的change事件，因此Select2无法感知到原生值已经被重置，UI就会停留在之前的选中状态。
3. 你测试时去掉select的id后重置生效，本质是你初始化Select2时使用的是id选择器，移除id后Select2没有成功绑定到对应元素，页面显示的是未被插件改造的原生select，自然可以被原生reset正常复位。

监听表单的reset事件，在浏览器完成原生表单值重置后，手动触发Select2的同步逻辑即可，代码实现如下：

$(document).ready(function() {
  // 原有Select2初始化逻辑不变
  $("#fieldName").select2();
  $("#actionName").select2();

  // 新增表单重置同步逻辑
  $("form").on("reset", function() {
    // setTimeout 0 会把逻辑放到浏览器原生reset执行完成后运行，避免取到重置前的旧值
    setTimeout(function() {
      // 触发Select2同步更新，所有绑定了Select2的元素都会刷新显示为重置后的值
      $(".select2-hidden-accessible").trigger("change.select2");
      // 如果只想同步指定的两个下拉框，可以替换为下面的写法
      // $("#fieldName, #actionName").trigger("change.select2");
    }, 0);
  });
});

补充：如果你的页面中Select2实例较多，也可以直接在reset回调里调用Select2官方提供的值更新方法，逐个指定需要重置的元素即可，效果完全一致。

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