使用Bootstrap MultiSelect通过AJAX追加复选框遇问题求助

问题分析 #

1. 数据解析错误：你将后台返回的JSON对象直接用split(",")拆分，导致原本的对象数组变成字符串数组，无法通过Response[i].Id和Response[i].text获取属性（另外JSON里是小写text，你代码里写了大写Text，大小写不匹配）。
2. HTML渲染错误：原生Element.append()方法传入字符串时，会将其作为纯文本节点插入，而非解析为DOM元素，所以标签会原样显示。
3. 未同步插件状态：直接手动修改DOM会导致Bootstrap Multiselect内部状态不同步，后续交互可能出问题，应该用插件提供的API更新选项。

修复方案 #

方案一：使用Bootstrap Multiselect官方API（推荐） #

直接操作原始ListBox，再通过插件API重建复选框，能保证状态完全同步：

$jq.ajax({
  contentType: 'application/json; charset=utf-8',
  dataType: 'json',
  type: 'POST',
  url: 'Messages.aspx/GetSeriesforFormIds',
  data: JSON.stringify({ data: formIds }), // 优化数据格式，避免手动拼接JSON
  success: function(data) {
    if (data.d != null) {
      const seriesList = data.d.data;
      if (seriesList && seriesList.length > 0) {
        const $listbox = $jq('[id*=ddlListBox]');
        // 清空原有选项（按需选择）
        $listbox.empty();
        // 往原生ListBox添加option
        seriesList.forEach(item => {
          $listbox.append(`<option value="${item.Id}">${item.text}</option>`);
        });
        // 重建Multiselect，插件自动生成对应复选框
        $listbox.multiselect('rebuild');
      }
    }
  },
  error: function(response) {
    console.log(response);
  }
});

方案二：正确操作DOM并同步插件状态（仅作理解） #

如果必须直接操作复选框容器，需正确解析HTML并同步插件：

$jq.ajax({
  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) {
      const seriesList = data.d.data;
      if (seriesList && seriesList.length > 0) {
        const $checkboxContainer = $jq('.multiselect-container');
        seriesList.forEach(item => {
          // 用jQuery的append方法自动解析HTML为DOM元素
          $checkboxContainer.append(`<li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="${item.Id}">${item.text}</label></a></li>`);
        });
        // 刷新插件状态
        $jq('[id*=ddlListBox]').multiselect('refresh');
      }
    }
  },
  error: function(response) {
    console.log(response);
  }
});

关键修复点说明 #

• 数据解析：直接通过data.d.data获取后台返回的数组，不要对JSON对象执行split操作，同时注意属性名大小写匹配（JSON里是text，不是Text）。
• HTML渲染：使用jQuery的append方法（而非原生append），它会自动将HTML字符串解析为DOM元素；若用原生方法，需先创建DOM节点再插入。
• 插件同步：操作完成后必须调用multiselect('rebuild')或multiselect('refresh')，确保插件内部状态与DOM同步。
• 数据格式优化：AJAX的data参数用JSON.stringify生成，避免手动拼接JSON导致的语法错误。

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