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

Question

Я искал много ответов и пробовал их, но я не могу динамически изменять значение drop2 с помощью 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> 

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

Update:

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

Версия выбор2 является 4.0.0

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

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

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 файл в директории активы/JS.

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

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

Answer 1

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

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

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

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

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

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

Answer 2

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

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>

Answer 3

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

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

Answer 4

Глядя на эти три линии

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");

Для

var SelectorSpeciality = $("#groupSelector");

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