引导选择 DropDownList 未显示答案

【问题标题】：Bootstrap-select DropDownList not showing引导选择 DropDownList 未显示
【发布时间】：2016-05-17 08:05:23
【问题描述】：

我有一个引导选择组合框，我在 ajax 调用中填充了数据 HTML：

<div class="row">
<select id="selectGemeente1" class="selectpicker" data-live-search="true"></select>
</div>

Ajax 调用：

var gemeenteLijst = [];

var GetGemeentes = function () {
    $.ajax({
        type: "GET",
        dataType: "json",
        url: 'https://localhost::blabla',
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            var test = document.getElementById("selectGemeente1");
            data.forEach(function (item) {
                var opt = document.createElement("option");
                opt.value = item.GemeenteId;
                opt.innerHTML = item.Naam;
                test.appendChild(opt);
            });         
        },
        error: function (xhr, status, error) {
            alert(xhr.responseText);
        }
    });
}

$(document).ready(function () {
    GetGemeentes();  
})

运行我的应用程序后，我的选择已填满，但下拉菜单未打开..

html after run

我看到很多解决方案说我应该把它放在我的 $(document).ready 中

$(".selectpicker").html(optgroup);

然后我收到一条错误消息，说 .selectpicker 不是函数。

gemeenteLijstLaden.js:36 Uncaught TypeError: $(...).selectpicker is not a function

我已经实现了这些脚本文件

<script src="~/Scripts/jquery-2.2.3.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-nl_NL.min.js"></script>
<script src="~/Scripts/myCharts/gemeenteLijstLaden.js"></script>

【问题讨论】：

能提供jsfiddle吗？
jsfiddle.net/vefnjdL2

标签： javascript jquery asp.net ajax bootstrap-select

【解决方案1】：

我找到了解决方案。我只需要刷新我的选择

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

【讨论】：

【解决方案2】：

success: function (data) {   
  var selectGemeent = $("#selectGemeente1");
                selectGemeent.empty();
                $('#selectGemeente1').append($("<option></option>").
                                attr("value", "0").
                                text("Select"));
                $.each(data.forEach, function (index, item) {
                    selectGemeent.append($('<option>', {
                        value: item.GemeenteId,
                        text: item.Naam
                    })); ////function
                });
},

在你的 ajax 成功中使用它并在文本和值之后添加你的其他文件

【讨论】：

这只会添加而不是我的其余选项。
在你的方法中，如果它像这样在 json 中返回 return Json(new { forEach= yourFilledDDLName }, JsonRequestBehavior.AllowGet);然后这段代码在这里工作我不知道你在 c# 中的方法返回类型确保你的方法在 json 中重新调整数据