bootstrap-select selectpicker разбивает каскадные выпадающие списки

Я создал два выпадающих списка в приложении 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>

... он ломает поток. Элементы были преобразованы в Booprap-Select selectpickers, как и предполагалось, и список стран работает по назначению (отображается в формате javascript bootstrap-select), но при нажатии на страну автоматически не изменяется список городов, как это было ранее. Вместо этого я должен отправить форму после нажатия на страну, чтобы иметь возможность видеть города в конкретных городах в списке городов.

Исходный код 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" в исходный класс. Это каким-то образом разрушило каскад. Есть ли способ исправить это?

Заранее спасибо