AJAX 调用后 Bootstrap 多选所选项目不起作用

Question

我遇到了 Boostrap 多选选定计数在 AJAX 调用后不起作用的问题。

我有一个父列表，我可以从中进行多项选择，然后发送 AJAX 调用来检索子列表的 ID 和文本。

我正在使用 JSON 数据在调用的成功函数上附加额外的复选框（

li

项）。我还将

<option>

项目添加到我的选择中，因为我认为这可以解决问题。

由于某种原因，现在，当我单击新复选框的新子列表中的复选框时，控件中的标签不会保留我选择的计数的记录。

任何人都可以帮助我理解我所缺少的吗？我看到了一些在创建列表项后重新初始化多选的建议，但这并没有产生什么影响。

$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));
  }
});

<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>

Answer 1

更新：我的问题的解决方案是在添加新的复选框控件后立即使用

$('#ddlListBox').multiselect('rebuild');

仍然包含 AJAX 调用的成功功能。

$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');
                            $checkboxContainer.html("");
                           
                            var temp = data.d;

                            if (temp != '') {

                                //debugger;
                                var obj = $.parseJSON(temp);

                                //debugger;
                                var $container = $('.ddlchkSeriesCheckboxes select');
                                $container.html("");
                                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;
                        **$('#ddlListBox').multiselect('rebuild');**
                    },
                    error: function (response) {
                        //alert(JSON.stringify(response));
                    }
                });