Как обновить раскрывающееся меню Select2 после загрузки ajax другого контента?
Я использую 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>
Ответы
Ответ 1
Выберите 3. *
Пожалуйста, см. Обновить данные select2 без перестройки элемента управления, поскольку это может быть дубликат. Другой способ - уничтожить и затем воссоздать элемент select2.
$("#dropdown").select2("destroy");
$("#dropdown").select2();
Если у вас возникли проблемы с сбросом состояния/региона при изменении страны, попробуйте очистить текущее значение с помощью
$("#dropdown").select2("val", "");
Здесь вы можете просмотреть документацию http://ivaynberg.github.io/select2/, которая описывает почти/все функции. Select2 поддерживает такие события, как change
, которые могут использоваться для обновления последующих выпадающих меню.
$("#dropdown").on("change", function(e) {});
Выберите 4. * Обновить
Теперь вы можете обновить данные/список без перестройки элемента управления, используя:
fooBarDropdown.select2({
data: fromAccountData
});
Ответ 2
Общим для других компонентов является прослушивание события change или для настраиваемых обработчиков событий, которые могут иметь побочные эффекты. Select2 не имеет настраиваемого события (например, select2: update), которое может быть вызвано иначе, чем изменение. Вы можете полагаться на пространство имен событий jQuery, чтобы ограничить область до Select2, хотя путем запуска события * change.select2.
$('#state').trigger('change.select2'); // Notify only Select2 of changes
Ответ 3
select2
имеет параметр placeholder
. Используйте этот
$("#state").select2({
placeholder: "Choose a Country"
});
Ответ 4
Используйте следующий скрипт после добавления вашего выбора.
$('#state').select2();
Не используйте destroy
.
Ответ 5
Инициализация снова select2
помощью нового идентификатора или класса, как select2
ниже
при загрузке страницы
$(".mynames").select2();
повторите вызов, когда пришел ajax после успешной функции ajax
$(".names").select2();