Select2 не отображает выбранное значение

Select2 загружает все элементы из моего списка успешно, проблема, которую я обнаружил при попытке выбрать конкретное значение при загрузке страницы. Пример:

:: поместить select2 в определенный элемент html, значение не выбрано даже для всех элементов.

$('#my_id').select2();

:: Когда страница загружена, я пытаюсь показать выбранный элемент, но не работает должным образом, потому что даже выбранный, select2 не показывает его.

$('#my_id').val('3'); //select the right option, but doesn't render it on page loads.

Как сделать выбранную опцию всплывающим при загрузке страниц?

Спасибо заранее.

ОБНОВЛЕНО

:: Как я загружаю все элементы select2 (извините, его нефрит, а не чистый HTML):

label(for='category') Category
    span.required *
select(id='category', style='width:230px', name='category')
    option(value='') - Select -
    each cat in categories
        option(value='#{cat.id}') #{cat.description}

P.S.: загружаются все элементы из моего списка.

:: Как я инициализирую select2:

Просто поставьте следующий код строки на мой javascript и выполните его:

$('#category').select2();

:: Как я пытаюсь выбрать конкретное значение:

Первая попытка:

$('#category').select2(
    {
        initSelection: function(element, callback) {
            callback($('#field-category').val());
        }
    }
);

Вторая попытка:

$('#category').val($('#field-category').val());

P.S.: #field-category имеет значение свое скрытое поле ввода и работает нормально.

Спасибо, ребята!

Ответ 1

Вам нужно использовать опцию initSelection, чтобы установить начальное значение.

Если вы используете предварительно определенный элемент select для создания select2, вы можете использовать следующий метод

$('select').select2().select2('val','3')

Демо: Fiddle

Ответ 2

добавить триггерное изменение после установки val:

$('#my_id').val('3').trigger('change');

Ответ 3

Очень простой способ решения этой проблемы:

//Step1: Here assuming id of your selectbox is my_id, so this will add selected attribute to 1st option
$('#my_id option').eq(0).prop('selected',true);

//Step2: Now reinitialize your select box

//This will work, if you haven't initialized selectbox
$('#my_id').select2();

или же

//This will work, if you have initialized selectbox earlier, so destroy it first and initialise it
$('#my_id').select2('destroy').select2();

Ответ 4

Это может помочь:

$('#mySelect2').val('1'); // Select the option with a value of '1'
$('#mySelect2').trigger('change'); // Notify any JS components that the value changed

Вы можете найти более подробную информацию здесь:

Спасибо

Ответ 5

Вот как сделать val в select2 просто выбрать соответствующий элемент. По какой-то причине select2 не предоставляет функцию поиска выбранных идентификаторов.

INIT:

$("#thing").select2({data:sources, initSelection: function(item, callback) {
  // despite select2 having already read the whole sources list when you 
  // do .val(n) you have to explicitly tell it how to find that item again.
  var to_be_selected = null;
  $.each(sources, function(index, thing) {
    if (thing.id == item.val()) {
      to_be_selected = thing;
      return;
    }
  })
  callback(to_be_selected);
}})

нормальный код

// to load the thing with id==3 from the initial sources list.
$("#thing").select2({'val': 3})

Ответ 6

Per здесь initSelection устарел в Select2 4.0 и более поздних версиях.

Используя Select2 4.0.0, это сработало для меня:

$('#my_id').select2({val:3});

HT: @Kokizzu

Ответ 7

Я встречаюсь с той же проблемой, это работает для меня:

Using Select2 4.0.0
$("#slect_id").val('3').trigger("change")

Ответ 8

Для меня я отправлял выбранный в наборе данных параметр по умолчанию, который не был выбран. Мне нужно было сделать что-то вроде ниже, чтобы заставить его работать -

$(".select").select2({
    data: data_names
});
data_names.forEach(function(name) {
    if (name.selected) {
        $(".select").select2('val', name.id);
    }
});

Ответ 9

У меня было несколько окон select2 с множественным выбором.

Шаг 1 должен был поместить мою строку school_ids в массив целых чисел, соответствующих идентификатору каждой школы, и удалить начальный ноль. Я должен был сделать это в отдельном теге сценария.

<script>
    var school_ids = <%= raw JSON.parse(@search.school_ids).map{|x| x.to_i} - [0]%>
</script>

Шаг второй заключался в том, чтобы создать поле выбора, затем установить значения, а затем вызвать их так:

<script>
$(document).ready(function() {
        $('.select2-multiple').select2({
            placeholder: "Hit Enter After Selection",
            width: 'resolve'
        });
        $('.select2-multiple').val(school_ids);
        $('.select2-multiple').trigger('change');
</script>