Question

我在mvc应用程序中创建了两个下拉列表。当我在第一个下拉列表中选择一个项目时，它会调用数据库并在下一个下拉列表中显示一个特定列表。

清单1：出生国清单2：出生城市（当用户从第一个列表中选择项目时，此列表将自动更改）

这些列表的代码是这样的：

<div class="col-md-6 form-group">
    @(this.Html.DropDownListFor(model => model.CountryOfBirth, this.Model.Countries,  new { @class = "form-control cascade-country" }))
</div>

<div class="col-md-6 form-group">
    @(this.Html.DropDownListFor(model => model.SearchCriteria.CityOfBirth, this.Model.ProfessionViewModel.Cities, new { @class = "form-control cascade-city" }))
</div>

这完美无缺。当我在此代码中添加'selectpicker'时......

<div class="col-md-6 form-group">
    @(this.Html.DropDownListFor(model => model.CountryOfBirth, this.Model.Countries,  new { @class = "form-control selectpicker cascade-country" }))
</div>

<div class="col-md-6 form-group">
    @(this.Html.DropDownListFor(model => model.SearchCriteria.CityOfBirth, this.Model.ProfessionViewModel.Cities, new { @class = "form-control selectpicker cascade-city" }))
</div>

......它打破了流程。这些元素已经转换为Boostrap-Select选择标记符合预期，并且国家/地区列表按预期工作（以javascript引导程序选择格式显示），但单击某个国家/地区并不会像之前那样自动更改城市列表。相反，我必须在点击国家后提交表单才能在城市列表中查看特定国家/地区的城市。

“cascade-country”和“cascade-cities”的原始实现javascript代码如下：

country dropdown js


(function($) {
    var countryDropdown = {
        init: function(action, allowAny) {
            $('.cascade-counrtry').change(function () {
                var countryId = $(this).find(":selected").val();
                var city = $('.cascade-city');

                if (countryId !== '') {
                    city.empty();
                    $.getJSON(action + '/' + countryId, function (data) {
                        var items;
                        if (allowAny)
                            items = '<option value>Any City</option>';
                        else
                            items = '<option>Select City</option>';

                        $.each(data, function (i, specification) {
                            items += "<option value='" + specification.Value + "'>" + specification.Text + "</option>";
                        });
                        city.html(items);
                        city.removeAttr('disabled');
                    });

                } else {
                    city.empty();
                    if (allowAny)

现在，当我从国家/地区列表中单击某个国家/地区时，第二个框完全消失。我所做的只是将“selectpicker”添加到原始类中。它以某种方式破坏了级联。有没有什么办法解决这一问题？

提前谢谢

bootstrap-select selectpicker打破级联下拉列表

0 个答案: