动态填充的多选列表未显示项目答案

【问题标题】：Dynamically populated multiselect list is not showing items动态填充的多选列表未显示项目
【发布时间】：2019-08-29 19:52:02
【问题描述】：

我正在尝试使用 ASP.Net MVC5 动态创建一个带有复选框的多选下拉列表。为此，我使用 bootstrap-multiselect.css 和 bootstrap-multiselect.js 文件。

我有两个带有复选框的下拉列表。第一个下拉列表是静态的，根据这个值，第二个下拉列表将被填充。第一个下拉菜单工作正常，但是当第二个下拉菜单填充时，没有显示任何项目。控制器正在返回所需的列表。

我编写了以下 jQuery 来从控制器获取值：

$.ajax({
  url: "/Discount/GetProduct",
  type: "GET",
  cache: false,
  data: 'strId=' + message,
  success: function(data) {
    var s = '';
    for (var i = 0; i < data.length; i++) {
      //alert(data[i].id);
      s += '<option value="' + data[i].id + '">' + data[i].value + '</option>';
    }
    $("#BrandId").html(s);
  }

从 Chrome 开发人员工具中，我找到了类似 class="jqmsLoaded" "style="display: none;" 的第二个下拉菜单。如果我消除了style="display: none;"，那么所有元素都会显示，但复选框和其他东西会丢失，即样式失真。

有什么线索吗？

【问题讨论】：

我们需要一个更完整的问题示例，包括 HTML 和 CSS，以便对此进行调试。这听起来像是一个 CSS 问题，与你的 JS 无关
是的。我不确定我应该添加哪个课程。
另请注意，如果您尝试将复选框放在标准的 select 控件中，那么这是行不通的。
你能分享GetProduct吗？

标签： jquery asp.net-mvc bootstrap-multiselect

【解决方案1】：

使用.append()后，需要使用.multiselect('rebuild')方法进行多选。

所以，这样修改你的 Ajax 的这一部分：

success: function(data) {

    for (var i = 0; i != data.length; i++) 
    {
        $('select#BrandId').append('<option value="' + data[i].id + '">' + data[i].value + '</option>');
    }

    $('select#BrandId').multiselect('rebuild');

}

multiselect('rebuild') 重建整个下拉菜单。所有选定的选项将保持选中状态（如果仍然存在！）。

【讨论】：

我试过了，但没用。当我注释掉以下行时，数据填充在第二个 DDL 中 - $(function () { $('#BrandId').multiselect({ columns: 1, placeholder: 'Select Brand', search: true, selectAll: true }); });
我测试并成功地构建和运行了代码。分享您的完整 javascript 以供您考虑。
我已经分享了javascript。控制器正在发送数据并附加在 DDL 中但未显示。当我添加 $("#BrandId").css("display", "block");然后只显示数据，但没有复选框和搜索选项。我正在使用 Carbon Master 引导带模板。我不确定模板是否负责。

【解决方案2】：

我在下面创建了一个示例代码..

 <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
  </head>
 
  <body>
  <div class="row">
  <div class="col-md-4">
	<strong>Users:</strong>
    <select id="users" multiple="multiple">
    </select>
</div>
<div class="col-md-4"><input type='button' value='Append users' onclick='loadUsers();' /></div>
<div class="col-md-4"><input type='button' value='Append Posts' onclick='loadPosts();' /></div>
</div>
</body>
</html>
<script >
$(document).ready(function(){
loadUsers();
})
function loadUsers()
{
$.ajax({
  url: "https://jsonplaceholder.typicode.com/users",
  type: "GET",
  cache: false,
  
  success: function(data) {
 $('#users').empty();
    $('#users').multiselect('destroy')
    for (var i = 0; i < data.length; i++) {
     $('#users').append("<option value=\"" + data[i].id + "\">" +  data[i].name + "</option>");
    }
    $('select').multiselect('refresh');
  }
})

}
function loadPosts()
{
$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts",
  type: "GET",
  cache: false,
  
  success: function(data) {
 $('#users').empty();
    $('#users').multiselect('destroy')
    for (var i = 0; i < data.length; i++) {
     $('#users').append("<option value=\"" + data[i].id + "\">" +  data[i].title + "</option>");
    }
    $('select').multiselect('refresh');
  }
})

}
</script>

如果您想每次都添加下拉列表，只需删除它

$('#users').empty();

【讨论】：