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

Question

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

使用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');