182

我正在使用 Oleg 的select2 demo，但我想知道是否可以更改下拉菜单中当前选择的值。

例如，如果加载的四个值是："Any", "Fruit", "Vegetable", "Meat"并且下拉列表默认为"Any"，我将如何"Fruit"在 JqGrid 事件中将其更改为loadComplete？

这可能吗？

4

16 回答 16

417

对于 select2 版本 >= 4.0.0

其他解决方案可能不起作用，但是以下示例应该起作用。

方案一：触发所有附加的变更事件，包括select2

$('select').val('1').trigger('change');

解决方案 2：导致触发 JUST select2 更改事件

$('select').val('1').trigger('change.select2');

有关这些示例，请参见此 jsfiddle。感谢 @minlare 的解决方案 2。

解释：

假设我有一个最好的朋友，用人们的名字选择。所以 Bob、Bill 和 John（在此示例中，我假设 Value 与名称相同）。首先，我在我的选择上初始化 select2：

$('#my-best-friend').select2();

现在我在浏览器中手动选择 Bob。接下来鲍勃做了一些淘气的事，我不再喜欢他了。所以系统为我取消选择 Bob：

$('#my-best-friend').val('').trigger('change');

或者说我让系统选择列表中的下一个而不是 Bob：

// I have assume you can write code to select the next guy in the list
$('#my-best-friend').val('Bill').trigger('change');

Select 2 网站上的注释（请参阅已弃用和删除的方法）可能对其他人有用：

.select2('val') "val" 方法已被弃用，将在 Select2 4.1 中删除。已弃用的方法不再包含 triggerChange 参数。

您应该直接在基础元素上调用 .val 。如果您需要第二个参数 (triggerChange)，您还应该在元素上调用 .trigger("change")。

$('select').val('1').trigger('change'); // instead of $('select').select2('val', '1');
于 2015-05-27T08:33:55.370 回答
137

查看select2 文档，您可以使用以下内容获取/设置值。

$("#select").select2("val"); //get the value
$("#select").select2("val", "CA"); //set the value

@PanPipes 指出这在 4.x 中发生了变化（在下面给他投赞成票）。val现在直接调用

$("#select").val("CA");

因此loadComplete，在 jqGrid 中，您可以获得所需的任何值，然后设置选择框值。

来自文档的通知

请注意，为了使用此方法，您必须在选项中定义 initSelection 函数，以便 Select2 知道如何将您在 val() 中传递的对象的 id 转换为呈现选择所需的完整对象。如果您要附加到选择元素，则该功能已经为您提供。

于 2013-10-28T16:25:25.293 回答
32 
this.$("#yourSelector").select2("data", { id: 1, text: "Some Text" });

这应该会有所帮助。

于 2014-07-08T07:05:55.547 回答
18

这应该更容易。

$("#e1").select2("val", ["View" ,"Modify"]);

但请确保您传递的值已经存在于 HTMl 中

于 2014-08-12T10:01:48.463 回答
17

如果要添加新的value='newValue'and text='newLabel'，则应添加以下代码：

  1. 将新选项添加​​到<select>：

    var opt = "<option value='newValue' selected ='selected'>" + newLabel+ " </option>";
$(selLocationID).html(opt);

  2. 触发<select>更改为选定值：

    $(selLocationID).val('newValue').trigger("change");
于 2016-01-12T02:19:36.320 回答
16

只是想添加第二个答案。如果您已经将选择呈现为 select2，则需要将其反映在选择器中，如下所示：

$("#s2id_originalSelectId").select2("val", "value to select");
于 2014-06-18T18:54:51.780 回答
12

您有两个选择 - 正如@PanPipes 回答所述，您可以执行以下操作。

$(element).val(val).trigger('change');

仅当没有任何自定义操作绑定到更改事件时，这才是可接受的解决方案。我在这种情况下使用的解决方案是触发一个 select2 特定事件，该事件会更新 select2 显示的选择。

$(element).val(val).trigger('change.select2');
于 2016-11-10T11:31:25.563 回答
9

在设置 select2 中选择的 String 选项时遇到一些麻烦：

使用选项：“option string1 /option”使用：

$('#select').val("string1").change();

但是带有一个带有值的选项：选项值“E” string1 /option：

$('#select').val("E").change(); // you must enter the Value instead of the string

希望这可以帮助那些在同样问题上苦苦挣扎的人。

于 2016-08-05T15:50:36.683 回答
5

做这个

 $('select#id').val(selectYear).select2();
于 2018-03-21T11:15:30.740 回答
5

如果要选择单个值，请使用 $('#select').val(1).change()

如果要选择多个值，请在数组中设置值，以便可以使用此代码 $('#select').val([1,2,3]).change()

于 2015-12-16T07:09:13.447 回答
5

对于 V4 Select2，如果要同时更改 select2 的值和下拉菜单的文本表示。

var intValueOfFruit = 1;
var selectOption = new Option("Fruit", intValueOfFruit, true, true);
$('#select').append(selectOption).trigger('change');

这不仅会设置幕后的值，还会设置 select2 的文本显示。

从https://select2.github.io/announcements-4.0.html#removed-methods中提取

于 2017-07-27T19:06:47.237 回答
4

我的预期代码：

$('#my-select').val('').change();

完美地工作感谢@PanPipes 的有用。

于 2015-06-23T07:08:11.377 回答
2

如果您有 ajax 数据源，请参考这里以获取免费错误

https://select2.org/programmatic-control/add-select-clear-items

// 设置 Select2 控件

$('#mySelect2').select2({
    ajax: {
        url: '/api/students'
    }
});

// 获取预选项目，并添加到控件

var studentSelect = $('#mySelect2');
$.ajax({
    type: 'GET',
    url: '/api/students/s/' + studentId
}).then(function (data) {
    // create the option and append to Select2
    var option = new Option(data.full_name, data.id, true, true);
    studentSelect.append(option).trigger('change');

    // manually trigger the `select2:select` event
    studentSelect.trigger({
        type: 'select2:select',
        params: {
            data: data
        }
    });
});
于 2017-09-13T04:04:35.993 回答
1

如果您想在知道下拉列表中的文本但不知道值的情况下设置选定项目，这里是一个示例：

假设您想出了一个时区并想要设置它，但time_zone_id其中包含值。

        var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        var $select2 = $('#time-zone');
        var selected = $select2.find("option:contains('"+timeZone+"')").val();
        $select2.val(selected).trigger('change.select2');
于 2019-01-15T05:02:38.650 回答
1

您可以简单地使用 get/set 方法来设置值

$("#select").select2("val"); //get the value
$("#select").select2("val", "CA"); //set the value

或者你可以这样做：

$('#select').val("E").change(); // you must enter the Value instead of the string
于 2019-06-20T03:48:01.967 回答
0 
// Set up the Select2 control
$('#mySelect2').select2({
    ajax: {
        url: '/api/students'
    }
});

// Fetch the preselected item, and add to the control
var studentSelect = $('#mySelect2');
$.ajax({
    type: 'GET',
    url: '/api/students/s/' + studentId
}).then(function (data) {
    // create the option and append to Select2
    var option = new Option(data.full_name, data.id, true, true);
    studentSelect.append(option).trigger('change');

    // manually trigger the `select2:select` event
    studentSelect.trigger({
        type: 'select2:select',
        params: {
            data: data
        }
    });
});

字体：选择 2 个文档

于 2018-03-22T12:51:18.417 回答