Ajax调用后Chosen组件无法正常工作问题求助

这个问题我之前也碰到过，本质原因很简单：Chosen组件是在页面初始加载时，把原生的<select>元素转换成它自己的UI组件并绑定事件的。当你通过Ajax动态更新了select的选项，或者直接替换了整个select元素后，原来的Chosen实例还绑定在旧的DOM节点上，自然就没法和新的内容联动了。

下面给你两种常见场景的解决方案：

场景1：Ajax更新select的选项（不替换整个select） #

如果只是更新select里的<optgroup>或<option>，需要先销毁旧的Chosen实例，再重新初始化：

// 假设这是你的Ajax请求
$.ajax({
  url: "获取城镇数据的接口地址",
  method: "GET",
  success: function(response) {
    // 拿到目标select元素
    const $citySelect = $("#propertyCity");
    
    // 清空旧的选项
    $citySelect.empty();
    
    // 遍历返回的数据，添加新的optgroup和option
    response.townGroups.forEach(group => {
      const $optgroup = $("<optgroup>").attr("label", group.label);
      group.options.forEach(option => {
        $optgroup.append($("<option>").val(option.value).text(option.name));
      });
      $citySelect.append($optgroup);
    });
    
    // 关键操作：销毁旧Chosen实例，再重新初始化
    $citySelect.chosen("destroy").chosen({
      width: "90%",
      multiple: true,
      data_tags: true, // 对应你原来的data-tags属性
      disable_search_threshold: 10 // 可选：当选项少于10个时隐藏搜索框
    });
  }
});

场景2：Ajax直接替换整个select元素 #

如果你的Ajax请求返回的是完整的select HTML代码，需要等新元素插入DOM后，再初始化Chosen：

$.ajax({
  url: "返回新select的接口地址",
  method: "GET",
  success: function(newSelectHtml) {
    // 把新的select插入到页面容器中（比如替换原来的容器内容）
    $("#select-wrapper").html(newSelectHtml);
    
    // 对新插入的select初始化Chosen
    $("#propertyCity").chosen({
      width: "90%",
      multiple: true,
      data_tags: true
    });
  }
});

几个要注意的细节 #

• 一定要在Ajax的success回调里执行Chosen的销毁/初始化操作，确保DOM已经更新完成
• 重新初始化时要带上你原来的所有配置项（比如width、multiple这些），不然会用Chosen的默认值，导致样式或功能不一致
• 如果页面上有多个Chosen组件，建议用类选择器（比如.chosen-select）来批量初始化，避免重复代码

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