如何在重新打开Bootstrap模态框时重置Choices.js选择器？

核心问题分析 #

Choices.js会将实例绑定到DOM元素的_choicesInstance属性上，模态框关闭后如果DOM未被销毁，实例的状态会被保留；仅调用removeActiveItems()和setChoiceByValue("")可能未同步原生select值、清空内部缓存或触发UI重渲染，导致旧状态残留。

解决方案一：模态框关闭时销毁实例，打开时重新初始化 #

这是最彻底的方式，避免状态残留，适合动态加载局部视图的场景：

1. 封装通用工具函数 #

// 销毁指定元素的Choices实例
function destroyChoicesInstance(selector) {
  const element = document.querySelector(selector);
  if (element && element._choicesInstance) {
    element._choicesInstance.destroy();
    delete element._choicesInstance; // 清理DOM上的实例引用
  }
}

// 初始化Choices实例（先销毁旧实例再创建新的）
function initChoicesInstance(selector, options = {}) {
  destroyChoicesInstance(selector);
  const element = document.querySelector(selector);
  if (element) {
    element._choicesInstance = new Choices(element, options);
  }
}

2. 绑定Bootstrap模态框事件 #

针对医疗板块模态框：

const healthCareModal = document.getElementById('healthCareModal');

// 模态框完全显示后初始化Choices
healthCareModal.addEventListener('shown.bs.modal', () => {
  initChoicesInstance('#healthCareModal select[name="GSMCountryCode"]');
});

// 模态框完全隐藏后销毁Choices实例
healthCareModal.addEventListener('hidden.bs.modal', () => {
  destroyChoicesInstance('#healthCareModal select[name="GSMCountryCode"]');
});

针对定制旅行板块模态框：

const customTourModal = document.getElementById('customTourModal');

customTourModal.addEventListener('shown.bs.modal', () => {
  initChoicesInstance('#customTourModal select[name="GSMCountryCode"]');
  initChoicesInstance('#customTourModal select[name="NumberOfAdult"]');
  initChoicesInstance('#customTourModal select[name="HowDidYouFindUsID"]');
});

customTourModal.addEventListener('hidden.bs.modal', () => {
  destroyChoicesInstance('#customTourModal select[name="GSMCountryCode"]');
  destroyChoicesInstance('#customTourModal select[name="NumberOfAdult"]');
  destroyChoicesInstance('#customTourModal select[name="HowDidYouFindUsID"]');
});

解决方案二：不销毁实例，彻底重置状态 #

如果需要保留实例（比如避免重复初始化的性能开销），可以直接重置实例的所有状态：

1. 封装重置函数 #

function resetChoicesInstance(instance) {
  // 移除所有选中项
  instance.removeActiveItems();
  // 清空搜索输入框（针对可搜索的下拉框）
  instance.clearInput();
  // 同步原生select的value为空
  instance.inputElement.value = '';
  // 触发change事件，确保表单数据同步到后端
  instance.inputElement.dispatchEvent(new Event('change'));
  // 重置内部搜索状态并重新渲染UI
  instance.searchValue = '';
  instance.searchResults = [];
  instance.render();
}

2. 在模态框打开时调用重置 #

healthCareModal.addEventListener('shown.bs.modal', () => {
  const gsmSelect = document.querySelector('#healthCareModal select[name="GSMCountryCode"]');
  if (gsmSelect && gsmSelect._choicesInstance) {
    resetChoicesInstance(gsmSelect._choicesInstance);
  }
});

customTourModal.addEventListener('shown.bs.modal', () => {
  const selects = [
    '#customTourModal select[name="GSMCountryCode"]',
    '#customTourModal select[name="NumberOfAdult"]',
    '#customTourModal select[name="HowDidYouFindUsID"]'
  ];
  
  selects.forEach(selector => {
    const element = document.querySelector(selector);
    if (element && element._choicesInstance) {
      resetChoicesInstance(element._choicesInstance);
    }
  });
});

为什么之前的方法失效？ #

• removeActiveItems()仅移除UI上的选中标记，但未同步原生select的value属性；
• setChoiceByValue("")仅当下拉框中存在value=""的选项时才生效，若没有空选项则无作用；
• 未触发change事件，导致表单数据未同步，后端返回的空值无法同步到UI。

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