通过 AJAX 添加复选框成功使用 Bootstrap MultiSelect 复选框列表下拉列表

Question

我希望使用 Ajax 调用的数据结果附加一些复选框，但是我在执行此操作时遇到了一些麻烦。迭代时我的 Response[i] 项似乎未定义。此外，输出的内容在列表中呈现为原始 html。我不确定这是否是一个语法问题，或者我只是没有正确处理 js。

这是我的 json 数据结果及其传递给 AJAX 调用的成功函数时的格式：

{"data":[{"Id":42,"text":"IMPR"},
         {"Id":62,"text":"AMFG"},
         {"Id":63,"text":"AIMP"},
         {"Id":64,"text":"OTHR"},
         {"Id":73,"text":"BSA"}
        ]
}

我使用 Bootstrap 多选作为用户控件，因此它可以在我们喜欢的任何页面上使用，因为它与标准下拉列表有一个非常好的细微差别。这是用户控件 .ascx 页面。

$(function() {
  $('[id*=ddlListBox]').multiselect({
    includeSelectAllOption: false,
    templates: {
      button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown"><span class="multiselect-selected-text"></span></button>'
    }
  });
});

.btn-group {
  width: fit-content;
  border: 1px solid #000000;
}

.btn-group ul {
  width: 500px !important;
}

.btn-group ul li:hover {
  /*border:1px solid red;*/
  background-color: #3D59AB;
  color: white;
}

<div class="form-group col-sm-5">
  <asp:ListBox ID="ddlListBox" class="ddlchkBox form-control form-select" runat="server" SelectionMode="Multiple">
  </asp:ListBox>
</div>

我想要完成的是将附加复选框添加到 ul 作为 li 元素。使用 json 数据中的“value”字段和作为 json 数据的“Id”字段的 Id 填充复选框的值。

Ajax成功函数：

$jq.ajax({
  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 container = document.querySelector('.ddlchkSeriesCheckboxes');
      var checkboxes = container.querySelector('.multiselect-container');
      var temp = data.d;
      if (temp != '') {
        var Response = temp.split(",");
        if ((temp != '') && (temp.length > 0)) {
          for (i = 0; i < Response.length; i++) {
            checkboxes.append('<li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="' + Response[i].Id + '">' + Response[i].Text + '</label ></a ></li >')
            //$("#ddlchkSeries").append("<input type='checkbox' id='chk-" + i + "' name='" + Response[i] + "' /> " + Response[i]);

          }
        }
      }
    }
  },
  error: function(response) {
    //alert(JSON.stringify(response));
  }
});

这是我渲染的html的结构：（我知道这里首选代码，但是嵌入的JS太多，无法使用代码片段）：

我需要将 json 数据结果添加为突出显示区域中的 listItem 复选框元素。我以为我已经接近 .append 方法了，但是渲染的是文字 html，而不是渲染的控件。

任何帮助将不胜感激。

Answer 1

您需要正确解析数据并使用 jQuery 追加

$('.multiselect-container').append(
  response.data
  .map(entry => `<li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="$entry.Id">${entry.text}</label ></a ></li >`)
  .join('')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<ul class="multiselect-container"></ul>

<script>
  const response = {
    "data": [{
        "Id": 42,
        "text": "IMPR"
      },
      {
        "Id": 62,
        "text": "AMFG"
      },
      {
        "Id": 63,
        "text": "AIMP"
      },
      {
        "Id": 64,
        "text": "OTHR"
      },
      {
        "Id": 73,
        "text": "BSA"
      }
    ]
  }
</script>