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

74
13

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

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

спросил(а) 2014-03-05T13:24:00+04:00 6 лет, 9 месяцев назад
0
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема