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

但其中 none 似乎正在更改下拉值。

如何动态设置值..

这是我的 HTML.

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

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

更新：

我使用的是 codeigniter MVC，我知道这应该无关紧要。但想把所有东西都放在table这里。

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

该函数位于 assets/js 目录下的某个 .js 文件中。

它帮助我拥有干净的代码并在我需要函数时调用函数。

我想我们可以用 initselection 修复它，但我不知道如何用 initselection 修复它我也试过谷歌搜索但没有运气..

Answer 1

您尝试的第二种方法有效，您只需设置 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>

Answer 2

只要首先将选项附加到列表中，第二个选项就会起作用（对于 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 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从哪里来的？据我所知，ID 应该是 #groupSelector 在您要更改的特定 select 上。不知道另一个ID来自哪里。交换

var SelectorSpeciality = $("#EditSpeciality");

到

var SelectorSpeciality = $("#groupSelector");

然后看看您post中提到的任何其他方法是否有效。

select2 使用 jquery 动态更改值

select2 changing value dynamically using jquery

ajax

jquery

jquery-select2-4