如何通过 JavaScript 初始化（和重新初始化）引导选择答案

【问题标题】：How to initialize (and re-initialize) bootstrap-select via JavaScript如何通过 JavaScript 初始化（和重新初始化）引导选择
【发布时间】：2017-06-28 15:17:22
【问题描述】：

我有一个引导模式，只有一个“选择”字段，用于在我的后端网络应用程序上为选定的服装产品选择颜色或性别剪裁或尺寸。

我通过 ajax 获取数据，返回一个带有 {Id,Text,Val} 的颜色/性别或大小（id 区分颜色/性别/大小）的 json 数组，并在添加新选项之前清除我的选择。

这适用于标准的 HTML select..

<select id="productProperty" class="form-control" multiple></select>

标准选择输出：

但是boostrap-select没有任何作用

<select id="productProperty" class="form-control selectpicker" multiple></select>

带引导选择的输出：

[

这是我的 ajax 调用

     $.ajax({   url: 'theUrl',
                type: "GET",
                data: { requiredInput: 'that' }
            }).done(function(response) {

                $("#productProperty").empty();
                var selectHtml = "";
                $.each(response.data, function(index, item) {
                  selectHtml += "<option value='" + item.Id + "' " + disabled_ + ">" + item.Name + "</option>";
                });

                $("#productProperty").html(selectHtml);
                $("#productProperty").selectpicker('refresh');

            });

我的布局 (MVC) 文件中有 $('.selectpicker').selectpicker()，就像使用 datepicker 和数据表一样

如何使用 bootstrap-select 解决这个问题？谢谢。

【问题讨论】：

您不想保留那种可以同时看到所有选项的选择，就像第一张图片中的那个吗？如果你想这样做，你不能使用 bootstrap-select 插件来做到这一点
$("#productProperty").selectpicker('render'); ?

标签： jquery asp.net-mvc-5 bootstrap-select

【解决方案1】：

jQuery $.each 语法错误

原始 HushdMap 访问

$.each(response.data, function(index, item) {
    selectHtml += "<option value='" + item.Id + "' " + disabled_ + ">" + item.Name + "</option>";
});

HushdMap 访问成功

$.each(response.data, function(index, item) {
    selectHtml += "<option value='" + index + "' " + disabled_ + ">" + item + "</option>";
});

附： DevTools 控制台逐步检查...

console.log(disabled_);

我的控制台

未捕获的 ReferenceError: disabled_ 未定义

你的控制台？

禁用

【讨论】：

【解决方案2】：

$(select).selectpicker('refresh');

【讨论】：

【解决方案3】：

你为什么不直接通过 jQuery 构建整个东西？

首先，选择下拉菜单：

var html = "";
html += '<select id="productProperty" class="form-control selectpicker" multiple>';

然后通过你的ajax：

 $.ajax({   url: 'theUrl',
            type: "GET",
            data: { requiredInput: 'that' }
        }).done(function(response) {

            $.each(response.data, function(index, item) {
              html += "<option value='" + item.Id + "' " + disabled_ + ">" + item.Name + "</option>";
            });
        });

然后关闭标签：

html += "</select>";

添加它，你应该一切都好。

$(".container").append(html);

【讨论】：

我是这样做的，但仍然没有显示选项。相同的代码适用于标准选择（只需删除 'selectpicker' 类）