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

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

1 个答案: