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