jquery - 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 代码来自于 select2 填充列表的 Controller 。

下面是 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);

该函数位于assets/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>')

并且不需要更改触发器