使用插件更改样式后，MVC 5 select 下拉列表不再由 jquery 填充

Question

我刚刚将 bootstrap-select 实施到我的项目中，但我遇到了问题。在我的项目中，有部门和位置的下拉菜单。位置列表是根据部门下拉列表的选择填充的。将 selectpicker class 添加到位置下拉列表后，它不再填充数据。我猜这个插件以某种方式改变了下拉菜单，导致这种情况发生。

Javascript:

$(function () {
    $("#SelectedDepartment").change(function () {
        var self = $(this);
        var items="";
        $.getJSON("@Url.Action("GetLocations","Incident")/" + self.val(),
        function(data){
            $.each(data,function(index,item){
                items += "<option value='" + item.Value + "'>" + item.Text + "</option>";
            });
            $("#SelectedLocation").html(items);
        });
    });
});

查看：

<div class="row">
    <div class="form-group col-sm-6">
        Incident department/location:
    </div>

    <div class="form-group col-sm-6">
        @Html.LabelFor(model => model.Departments, htmlAttributes: new { @class = "control-label col-md-4" })
        <div class="col-md-10">
            @Html.DropDownListFor(x => x.SelectedDepartment,
                                new SelectList(Model.Departments, "Value", "Text"), new { @class = "selectpicker", @title = "Select a Department"})
            @Html.ValidationMessageFor(model => model.Departments, "", new { @class = "text-danger" })
        </div>

        @Html.LabelFor(model => model.Locations, htmlAttributes: new { @class = "control-label col-md-4" })
        <div class="col-md-10">
            @Html.DropDownListFor(x => x.SelectedLocation,
                                new SelectList(Model.Locations, "Value", "Text"), new { @class = "", @title = "Select a Location" })
            @Html.ValidationMessageFor(model => model.Locations, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

Answer 1

只需使用这个：

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

使用插件更改样式后，MVC 5 select 下拉列表不再由 jquery 填充

MVC 5 select dropdown no longer getting populated by jquery after changing the styling using a plugin

asp.net-mvc

twitter-bootstrap

bootstrap-select