动态添加select字段时如何自动实例化Choices.js？

方法1：用MutationObserver监听DOM变化（推荐） #

这种方法能自动捕获所有动态添加到DOM中的.js-choice元素，无需在每次AJAX请求后手动处理：

// 封装实例化逻辑，避免重复代码
function initChoices(element) {
  // 检查元素是否已经实例化过，避免重复操作
  if (element.hasAttribute('data-choices-initiated')) return;
  
  // 实例化Choices
  new Choices(element);
  // 添加标记，标记已实例化
  element.setAttribute('data-choices-initiated', 'true');
}

// 初始化页面已有的元素
document.querySelectorAll('.js-choice').forEach(initChoices);

// 创建MutationObserver监听DOM变化
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 遍历所有新增的节点
    mutation.addedNodes.forEach((node) => {
      // 如果是元素节点，直接检查是否是.js-choice
      if (node.nodeType === 1 && node.classList.contains('js-choice')) {
        initChoices(node);
      }
      // 如果是包含子元素的节点，查找内部的.js-choice
      else if (node.nodeType === 1 && node.querySelector('.js-choice')) {
        node.querySelectorAll('.js-choice').forEach(initChoices);
      }
    });
  });
});

// 配置监听选项：监听目标节点的子元素添加
observer.observe(document.body, {
  childList: true,
  subtree: true // 监听所有子层级的变化
});

方法2：在AJAX回调中直接处理（更轻量） #

如果你的AJAX请求是可控的，也可以在请求成功后，直接从返回的HTML中筛选.js-choice元素进行实例化。解决Choices未定义的问题，核心是把实例化逻辑封装成全局可访问的函数：

// 全局封装实例化函数
window.initChoices = function(element) {
  if (!element.hasAttribute('data-choices-initiated')) {
    new Choices(element);
    element.setAttribute('data-choices-initiated', 'true');
  }
};

// 初始化现有元素
document.querySelectorAll('.js-choice').forEach(window.initChoices);

// 在AJAX请求的成功回调中处理
// 假设你的AJAX代码类似这样
fetch('/your-api-endpoint')
  .then(response => response.text())
  .then(html => {
    // 将返回的HTML插入到表单中
    const formContainer = document.getElementById('your-form-container');
    formContainer.insertAdjacentHTML('beforeend', html);
    
    // 筛选新添加的.js-choice元素并实例化
    const newChoices = formContainer.querySelectorAll('.js-choice:not([data-choices-initiated])');
    newChoices.forEach(window.initChoices);
  });

关于Choices未定义的说明 #

出现这个错误大概率是因为AJAX回调的作用域没有访问到全局的Choices变量。把实例化逻辑封装成全局函数（比如挂载到window对象上），就能确保回调里能正常调用。另外要确认Choices.js的脚本是在你的代码之前加载的，确保全局变量已存在。

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