select2使用jquery动态更改值

Question

我已经搜索了许多答案并尝试了它们,但我无法使用jquery动态更改select2下拉列表的值.

我正在使用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代码来自Controller,select2正在填充列表.

以下是select2 Code.

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

该函数驻留在.jsassets/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>')

并且不需要触发更改