如何通过JavaScript初始化（并重新初始化）bootstrap-select

Question

我有一个只有一个'select'字段的bootstrap模式，我用它来选择我的beckend网络应用程序中所选服装产品的颜色或性别剪裁或大小。

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

这适用于标准HTML选择..

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

标准选择输出：

但无法使用boostrap-select

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

使用bootstrap选择输出：

[

这是我的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和datatables一样

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

Answer 1

为什么不通过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);

Answer 2

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