Bootstrap Multiselect在AJAX调用后选中计数功能失效求助

问题场景 #

父列表多选后发起AJAX请求获取子列表数据，成功后手动向<select>追加<option>，同时向.multiselect-container追加带复选框的<li>。但点击新添加的复选框时，控件标签的选中计数不更新。尝试过reload方法但无效。

现有JS代码 #

$jq.ajax({
  async: false,
  contentType: 'application/json; charset=utf-8',
  dataType: 'json',
  type: 'POST',
  url: 'Messages.aspx/GetSeriesforFormIds',
  data: "{'data':'" + JSON.stringify(formIds) + "'}",
  success: function(data) {
    //debugger;
    if (data.d != null) {
      var $checkboxContainer = $('.ddlchkSeriesCheckboxes .multiselect-container');

      var temp = data.d;

      if (temp != '') {
        //debugger;
        var obj = $.parseJSON(temp);

        debugger;
        var $container = $('.ddlchkSeriesCheckboxes select');

        if ((obj != '') && (obj.data.length > 0)) {
          for (i = 0; i < obj.data.length; i++) {
            $container.append('<option value="' + obj.data[i].Id + '">' + obj.data[i].text + '</option>')
            $checkboxContainer.append('<li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="' + obj.data[i].Id + '">' + obj.data[i].text + '</label ></a ></li >')
          }
        }
      }
    }
    debugger;
    //$('.ddlchkSeriesCheckboxes select').multiselect('reload');
  },
  error: function(response) {
    //alert(JSON.stringify(response));
  }
});

初始HTML（select） #

<select size="4" name="ctl00$ContentPlaceHolder1$ddlchkSeries$ddlListBox" multiple="multiple" id="ctl00_ContentPlaceHolder1_ddlchkSeries_ddlListBox" class="ddlchkBox form-control form-select" style="display: none;">
  <option value="30">EDB</option>
  <option value="31">JDBW</option>
  <option value="32">KLD</option>
  <option value="72">JDSW</option>
  <option value="84">KLD2</option>
  <option value="30">EDB</option>
  <option value="31">JDBW</option>
  <option value="32">KLD</option>
  <option value="58">CMB</option>
  <option value="72">JDSW</option>
  <option value="84">KLD2</option>
</select>

AJAX生成的复选框HTML #

<ul class="multiselect-container dropdown-menu show" style="position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate3d(0px, -30.5455px, 0px);" data-popper-placement="top-start">
   <li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="30">EDB</label></a></li>
   <li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="31">JDBW</label></a></li>
   <li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="32">KLD</label></a></li>
   <li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="72">JDSW</label></a></li>
   <li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="84">KLD2</label></a></li>
   <li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="30">EDB</label></a></li>
   <li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="31">JDBW</label></a></li>
   <li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="32">KLD</label></a></li>
   <li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="58">CMB</label></a></li>
   <li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="72">JDSW</label></a></li>
   <li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="84">KLD2</label></a></li>
</ul>

问题原因 #

手动向.multiselect-container添加DOM元素的方式完全绕开了Bootstrap Multiselect的内部逻辑。组件的选中计数、复选框状态同步都依赖于自身绑定的事件监听和状态管理，手动插入的复选框没有关联这些逻辑，自然无法触发计数更新。另外，reload方法需要基于<select>内的<option>重新渲染整个下拉容器，而不是手动修改容器后调用。

解决方法 #

1. 仅更新原生<select>：所有选项变更都通过修改<select>的<option>实现，不要手动操作.multiselect-container。
2. 销毁后重新初始化组件：如果reload无效，先调用destroy清除原有实例，再重新初始化Multiselect，确保新选项被组件正确识别。
3. 使用异步AJAX：移除async: false，避免同步请求阻塞浏览器。

修改后的JS代码 #

$jq.ajax({
  async: true,
  contentType: 'application/json; charset=utf-8',
  dataType: 'json',
  type: 'POST',
  url: 'Messages.aspx/GetSeriesforFormIds',
  data: JSON.stringify({ data: formIds }),
  success: function(data) {
    if (data.d != null && data.d !== '') {
      var obj = $.parseJSON(data.d);
      var $select = $('.ddlchkSeriesCheckboxes select');

      if (obj.data && obj.data.length > 0) {
        // 可选：清空原有选项，根据业务需求决定是否保留初始选项
        // $select.empty();
        
        // 仅向原生select追加option
        obj.data.forEach(item => {
          $select.append(`<option value="${item.Id}">${item.text}</option>`);
        });

        // 销毁旧组件并重新初始化，传入你的原有配置参数
        $select.multiselect('destroy');
        $select.multiselect({
          includeSelectAllOption: true,
          enableFiltering: true
          // 其他初始化配置
        });
      }
    }
  },
  error: function(response) {
    console.error('AJAX请求失败:', response);
  }
});

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