select2 динамически изменяет значение с помощью jquery

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

Я использую ajax select2 для удаленного получения данных с помощью json.

раскрывающийся список работает нормально.

Вот что я пробовал до сих пор.

//UserGroupID is a variable contains the database value
var groupSelector = $("#EditSpeciality");
//1.
groupSelector.select2("val", {ID: userGroupID, TEXT: "Lorem Ipsum"});
//2.
groupSelector.val(userGroupID).trigger("change");
//3.
groupSelector.select2("val", {ID: userGroupID, TEXT: "Lorem Ipsum"});
//4.
groupSelector.val(userGroupID);

Но ни один из них, похоже, не меняет значение раскрывающегося списка.

Как динамически установить значение ..

Вот мой HTML.

<select class="form-control select2" id="groupSelector" name="groupSelector" style="width: 100%;"></select>

=-=-=-=-=-=-=-=-=-=-=

Обновление:

Я использую codeigniter MVC, я знаю, что это не имеет значения. но хочу выложить здесь все на стол.

Версия select2 - 4.0.0

Код JSON, который я получаю, взят из контроллера, через который select2 заполняет список.

Ниже приведен код select2.

function commonSelect2(selector,url,minInputLength,placeholder){
    selector.select2({
        minimumInputLength:minInputLength,
        placeholder:placeholder,
        ajax: {
            url: url,
            dataType: "json",
            delay: 250,
            data: function (params) {
                return {
                    q: params.term, // search term
                    page: params.page
                };
            },
            processResults: function (data) {
                return {
                    results: $.map(data, function(obj) {
                        return { id: obj.ID, text: obj.TEXT };
                    })
                };
            },
            cache: true
        },
        debug:false
    });
}

Я вызываю указанную выше функцию таким образом, чтобы открыть раскрывающийся список на странице.

 // Speciality Selector for editing popup box
var SelectorSpeciality = $("#EditSpeciality");
var minInputLength = 0;
var placeholder = "Select Speciality";
var ConsultantSelectorURL = "' . base_url() . 'Admin/select_speciality";
commonSelect2(SelectorSpeciality,ConsultantSelectorURL,minInputLength,placeholder);

функция находится в каком-то .js файле в каталоге assets / js.

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

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


jquery ajax jquery-select2-4
person Sizzling Code    schedule 03.11.2015    source источник

Ответы (4)


arrow_upward
8
arrow_downward

Пока опция добавлена ​​в список первой, будет работать второй вариант (для select2 4.0)

$("#groupSelector").append ('<option value="' + userGroupID+ '">' + userGroupID+ '</option>')

groupSelector.val(userGroupID).trigger("change");

Если вам нужно выбрать опцию, это нужно сделать при добавлении,

$("#groupSelector").append ('<option selected="selected" value="' + userGroupID+ '">' + userGroupID+ '</option>')

и изменение триггера не требуется

person C Bisson    schedule 13.11.2015
comment
В моем случае атрибут selected="selected" отсутствовал. Спасибо! - person philburns; 21.04.2021

arrow_upward
3
arrow_downward

Второй метод, который вы пробовали, работает, вы просто устанавливаете значение select, а затем запускаете событие change, поэтому select2 подхватывает его:

jQuery(function($) {
  $('select').select2();

  $('select').val(2).trigger('change');
  $('body').append('<p>Value is: ' + $('select').val() + '</p>');

  $('select').val(3).trigger('change');
  $('body').append('<p>Value is: ' + $('select').val() + '</p>');
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>

<select class="form-control select2" id="groupSelector" name="groupSelector" style="width: 100%;">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

person Andy    schedule 03.11.2015
comment
Сэр, в моем коде есть данные в формате json, поступающие от контроллера. и я использую select2 4.0.0. и ни один из вышеперечисленных способов у меня не сработал :( - person Sizzling Code; 02.02.2016

arrow_upward
1
arrow_downward

Вы можете попробовать, как это работает в моем случае,

groupSelector.select2("val", {"id": userGroupID, text: "Lorem Ipsum"}, true);
person Dharmik    schedule 08.02.2016

arrow_upward
0
arrow_downward

Глядя на эти три строки

var SelectorSpeciality = $("#EditSpeciality");

groupSelector.val(userGroupID).trigger("change");

<select class="form-control select2" id="groupSelector" name="groupSelector" style="width: 100%;"></select>`

Откуда взялось #EditSpeciality? Насколько я понимаю, идентификатор должен быть #groupSelector для того конкретного выбора, который вы пытаетесь изменить. Не знаю, откуда взялся другой идентификатор. Поменять местами

var SelectorSpeciality = $("#EditSpeciality");

To

var SelectorSpeciality = $("#groupSelector");

Затем посмотрите, работает ли какой-либо из других методов, упомянутых в вашем сообщении.

person Matt    schedule 09.02.2016