Javascript 引导选择选择器中断级联下拉列表

我在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>

@（this.Html.DropDownListFor（model=>model.CountryOfBirth，this.model.Countries，新的{@class=“form control cascade country”}））
@（this.Html.DropDownListFor（model=>model.SearchCriteria.CityOfBirth，this.model.ProfessionViewModel.Cities，新的{@class=“form control cascade city”}））

这很好用。但是，当我将“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>

@（this.Html.DropDownListFor（model=>model.CountryOfBirth，this.model.Countries，新的{@class=“form control selecter cascade country”}））
@（this.Html.DropDownListFor（model=>model.SearchCriteria.CityOfBirth，this.model.ProfessionViewModel.Cities，新的{@class=“表单控件选择器级联城市”}））

…它打破了流程。元素已转换为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)

国家/地区下拉列表js
（函数（$）{
变量countryDropdown={
初始化：函数（动作，允许）{
$（'.cascade contry'）.change（函数（）{
var countryId=$（this.find（“：selected”）.val（）；
var city=$（“.cascade city”）；
如果（countryId！=''）{
城市。空（）；
$.getJSON（操作+'/'+countryId，函数（数据）{
风险值项目；
如果（允许）
项目='任何城市'；
其他的
项目='选择城市'；
$。每个（数据、功能（i、规格）{
项目+=“”+规格。文本+“”；
});
html（项目）；
城市拆迁人（“残疾人”）；
});
}否则{
城市。空（）；
如果（允许）

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

---

提前感谢您

您使用的是哪种编程语言？加载的新城市在select的选项中？您是否尝试过执行$（'.your select'）。selectpicker（'refresh'）或$（'.your select'）。selectpicker（'render'）？