Как установить значение по умолчанию в поле ввода с select2, инициализированным на нем

Как установить значение по умолчанию в поле ввода с помощью select2? вот мой HTML

<input type="text" id="itemId0" value="Item no. 1">

и мой javascript:

    $("#itemId0").select2({
    placeholder: 'Select a product',
    formatResult: productFormatResult,
    formatSelection: productFormatSelection,
    dropdownClass: 'bigdrop',
    escapeMarkup: function(m) { return m; },
    minimumInputLength:1,
    ajax: {
        url: '/api/productSearch',
        dataType: 'json',
        data: function(term, page) {
            return {
                q: term
            };  
        },  
        results: function(data, page) {
            return {results:data};
        }   
    }   
});

function productFormatResult(product) {
   var html = "<table><tr>";
   html += "<td>";
   html += product.itemName ;
   html += "</td></tr></table>";
   return html;
}

function productFormatSelection(product) {
var selected = "<input type='hidden' name='itemId' value='"+product.id+"'/>";
return selected + product.itemName;
}

вот проблема: Если я не буду инициализировать окно ввода в поле select2, я могу отобразить значение по умолчанию для моего поля ввода "Item No.1", но когда я инициализирую его с помощью select2, например. $("#itemId0").select2({code here}); Я не могу отобразить значение по умолчанию для моего текстового поля. .

Кто-нибудь знает, как я могу отобразить значение по умолчанию?

Ответ 1

Вам нужно использовать метод initSelection, как описано в документации Select2.

Из документации:

Вызывается, когда Select2 создан, чтобы позволить пользователю инициализировать выбор в зависимости от значения элемента select2, присоединенного к.

В вашем случае ознакомьтесь с примером Загрузка удаленных данных, поскольку он показывает, как включить его вместе с запросами AJAX.

Надеюсь, это поможет.

Ответ 2

Старый начальный выбор с initSelection

В прошлом в Select2 требовалась опция initSelection, которая была определяемый всякий раз, когда используется пользовательский источник данных, первоначальный выбор для компонента, который будет определен. Это было заменяется текущим методом на адаптере данных.

{
  initSelection : function (element, callback) {
    var data = [];
    $(element.val()).each(function () {
      data.push({id: this, text: this});
    });
    callback(data);
  }
}

Вы также можете использовать заданное значение.

Вы должны напрямую вызвать .val в базовом элементе вместо. Если вам нужен второй параметр (triggerChange), вы должен также вызвать .trigger( "change" ) для элемента.

$("select").val("1").trigger("change"); // instead of $("select").select2("val", "1");

работ:

Ответ 3

Если у вас есть элемент ввода, объявите его следующим образом. Не забудьте также заполнить поле значений.

<input type="hidden" name="player" id="player" data-init-text="bla bla" value="bla bla" >

Напишите функцию initSelection

 initSelection : function (element, callback) {
                    var elementText = $(element).attr('data-init-text');
                    callback({"text":elementText,"id":elementText});
            }

убедитесь, что этот обратный вызов имеет ту же пару значений ключа, что и один возвращаемый вызовом ajax.

callback({"text":elementText,"id":elementText});

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

Ответ 4

Метод initSelection не может корректно работать с атрибутом пустого значения.

Это была моя проблема.

Надеюсь, это поможет кому-то.

Ответ 5

Вы можете легко изменить значение выбранного входа, просто поместив идентификатор выбранного вами параметра в атрибут данных вашего выбранного ввода. А затем в javascript

var select =  $('.select');
var data   =  $(select).data('val');

$(select).val(data);

И после этого инициализируйте select2 на выбранном входе

$(select).select2();

Вот скрипка https://jsfiddle.net/zeeshanu/ozxo0wye/

Ответ 6

вам не нужен ajax или json, вам просто нужно поместить SELETED-тэг в свой OPTION, а SELECT2 отобразит значение init.

Ответ 7

Это работает для меня: "Добавить значение по умолчанию в голову массива"

data.unshift({'id':-1, 'name':'xxx'});

$('#id_xxx).select2({
      placeholder: '--- SELECT ---',
      data: data,
      allowClear: true,
      width: '100%'
});

Однако официальный документ говорит:

You can set default options by calling $.fn.select2.defaults.set("key", "value").

Однако примера нет.

Ответ 8

var elem = $("#myselect");
var values = ["a", "b", "c", "d", "e"];

множественный выбор

var value = ["a", "b", "c"];

одиночный выбор

var value = "a";

выберите функцию

elem.select2({
    data: values.map(option => ({ selected: value.includes(option), text: option, id: option }))
});

Ответ 9

Я нашел чрезвычайно простое решение.

Вы должны передать идентификатор и имя опции по умолчанию и вставить его как htnl внутри

  var html = ' <option value="defaultID">defaultName</option>';
    $(".js-example-basic-single").html(html);

Как получить defaultID или defaultName зависит от вашего кода. Например, в ASP.Net MVC вы можете сделать это как

<select id="PersonalID" class="js-example-basic-single form-control form-control-sm" name="PersonalID">
     <option value="@Model.PersonalID">@ViewBag.PersonalInfo</option>
</select>