Как обновить раскрывающееся меню 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();