Я использую Select2 в комбинации выпадающих меню. У меня есть одно меню для «Страны» и одно для «Государств / Провинций». В зависимости от страны, которая выбрана, раскрывающиеся диалоги «Штаты / Регионы» изменяются в контенте. Штаты / провинции вытягиваются с помощью ajax из базы данных, а затем отображаются следующим образом:
$display_output = '<select style="width:350px;" tabindex="2" name="state" id="state" data-placeholder="Choose a Country..."> '; $display_output .= '<option value="" selected>Select a State</option> '; while ($state_details = $this->fetch_array($sql_select_states)) { $display_output .= '<option value="' . $state_details['id'] . '" ' . (($selected_value == $state_details['id']) ? 'selected' : ''). '>' . $state_details['s.name'] . '</option>'; } $display_output .= '</select>'; Все идет нормально. Все провинции меняются правильно, однако, когда они изначально загружаются, Select2 показывает «undefined» для выпадающего списка состояний, хотя я его установил как
data-placeholder="Choose a Country..."
Я предполагаю, что это может быть потому, что при загрузке выбрана страна «Соединенные Штаты», и она заполняет список состояний, но ни один из них не является по умолчанию или не выбран. Есть ли другой способ определить значение по умолчанию, чтобы оно не отображалось «Undefined»?
И еще одна (но менее важная) проблема заключается в том, что когда кто-то выбирает «Соединенные Штаты», например, а затем выбирает «Аризону», если человек затем переходит в «Канаду» как страну, состояние «Аризоны» по-прежнему остается, но когда открытие выпадающего списка провинций Канады можно выбрать. Есть ли способ вернуть его на значение по умолчанию временно, когда кто-то выбирает другую страну, пока провинция не будет выбрана снова?
В настоящий момент мой код загрузки:
<script> $(document).ready(function() { $("#state").select2(); }); </script>
Пожалуйста, см. Обновление данных select2 без перестройки элемента управления, поскольку это может быть дубликат. Другой способ – уничтожить, а затем воссоздать элемент select2.
$("#dropdown").select2("destroy"); $("#dropdown").select2();
Если у вас возникли проблемы с сбросом состояния / региона при изменении страны, попробуйте очистить текущее значение с помощью
$("#dropdown").select2("val", "");
Вы можете просмотреть документацию здесь http://ivaynberg.github.io/select2/, которая описывает почти / все функции. Select2 поддерживает такие события, как change которое можно использовать для обновления последующих выпадающих списков.
$("#dropdown").on("change", function(e) {});
Теперь вы можете обновить данные / список без перестройки элемента управления, используя:
fooBarDropdown.select2({ data: fromAccountData });
Обычно другие компоненты могут прослушивать событие изменения или настраивать пользовательские обработчики событий, которые могут иметь побочные эффекты. Select2 не имеет настраиваемого события (например, select2: update), которое может быть вызвано иначе, чем изменение . Вы можете положиться на пространство имен событий jQuery, чтобы ограничить область выбора Select2, хотя путем запуска события * change.select2.
$('#state').trigger('change.select2'); // Notify only Select2 of changes
select2 имеет параметр placeholder . Используйте этот
$("#state").select2({ placeholder: "Choose a Country" });