【发布时间】：2013-11-07 12:42:38
【问题描述】：
我正在使用 Oleg 的 select2 demo，但我想知道是否可以更改下拉菜单中当前选择的值。
例如，如果加载的四个值是："Any", "Fruit", "Vegetable", "Meat" 并且下拉列表默认为 "Any"，我如何能够在 JqGrid 事件 loadComplete 中将其更改为 "Fruit"？
这可能吗？
【问题讨论】：
标签： jquery jqgrid ui-select2
【发布时间】：2013-11-07 12:42:38
【问题描述】：
对于 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 网站上可能对其他人有用的注释（请参阅Deprecated and removed methods）：
.select2('val') “val”方法已被弃用，将在 Select2 4.1 中删除。已弃用的方法不再包含 triggerChange 参数。
您应该直接在底层元素上调用 .val。如果您需要第二个参数（triggerChange），您还应该在元素上调用 .trigger("change")。
$('select').val('1').trigger('change'); // instead of $('select').select2('val', '1');
【讨论】：
-
这是正确的答案：它适用于单选和多选
-
只有在没有任何自定义操作绑定到
change事件（例如重新加载表单）时，这才是可接受的解决方案。否则，这些操作将在触发change()时被冗余调用。 -
如果这不能正常工作，添加一个 setTimeout： setTimeout(function(){ $("select").val("1").trigger("change"); }, 1000) ;
-
@van_folmert 我也有同样的问题。理想情况下，我想更改显示为选中的内容，而不触发事件（因为我有一个绑定到
onChange的自定义事件） -
有关如何解决@van_folmert 问题的示例，请参阅下面的答案
查看select2 docs，您可以使用以下内容获取/设置值。
$("#select").select2("val"); //get the value
$("#select").select2("val", "CA"); //set the value
@PanPipes 指出这在 4.x 中发生了变化（在下面给他投上一票）。现在直接调用val
$("#select").val("CA");
因此，在 jqGrid 的 loadComplete 中，您可以获得所需的任何值，然后设置选择框值。
来自文档的通知
请注意，要使用此方法，您必须定义 选项中的 initSelection 函数，因此 Select2 知道如何 将您在 val() 中传递的对象的 id 转换为它的完整对象 需要渲染选择。如果要附加到选择元素 此功能已为您提供。
【讨论】：
-
似乎不适用于我正在查看的演示。不知道为什么，这可能与它插入 JqGrid 的方式有关。
-
更新了答案。看起来您必须手动将该函数添加到 select2 初始化中，以便它知道如何处理
val调用。 -
@AdamKDean：可以通过在
<select>上测试select2-offscreen类的存在性来测试<select>是否转换为select2控件。搜索工具栏的所有元素都具有以gs_前缀开头的id，并具有类似colModel的名称。您可以使用getGridParam获取colModel。 -
谢谢，我已经设法获取过滤器信息，我只需要在使用
select2选择重新创建过滤器栏后设置它。我今天再看看，也许用新的眼睛我可以解决它。再次感谢。更新：将代码包装在布尔检查中解决了我遇到的问题，尽管它停止刷新搜索栏而不是再次选择前一个元素。
this.$("#yourSelector").select2("data", { id: 1, text: "Some Text" });
这应该会有所帮助。
【讨论】：
-
多值示例：this.$("#yourSelector").select2("data", [{ id: 1, text: "Some Text" },{ id: 2, text: "其他一些文字"}]);
这应该更容易。
$("#e1").select2("val", ["View" ,"Modify"]);
但请确保您传递的值已经存在于 HTMl 中
【讨论】：
如果你想添加新的value='newValue'和text='newLabel'，你应该添加这个代码：
-
向
<select>添加新选项：var opt = "<option value='newValue' selected ='selected'>" + newLabel+ " </option>"; $(selLocationID).html(opt); -
触发
<select>更改为选定值：$(selLocationID).val('newValue').trigger("change");
【讨论】：
-
我发现这比弄乱 select2 的“数据”更干净 :) 更改 dom，让 select2 解决剩下的问题。
-
我正在 Safari 上进行测试，这是唯一有效的解决方案。其他人更有说服力，我更喜欢它们，但最重要的是，我更喜欢工作代码。就是这样。 :)
-
为此感谢一百万！我正在使用选择 2 个框，其中两个框都填充了 Ajax，我为第一个框使用了额外的数据属性来设置第二个框的值。再次感谢！！！！
只是想添加第二个答案。如果您已经将选择呈现为 select2，则需要将其反映在选择器中，如下所示：
$("#s2id_originalSelectId").select2("val", "value to select");
【讨论】：
您有两个选择 - 正如@PanPipes 的回答所述，您可以执行以下操作。
$(element).val(val).trigger('change');
仅当没有任何自定义操作绑定到更改事件时，这是一种可接受的解决方案。我在这种情况下使用的解决方案是触发一个 select2 特定事件，该事件会更新 select2 显示的选择。
$(element).val(val).trigger('change.select2');
【讨论】：
-
是的，这是最好的全方位解决方案。真的，我认为 Select2 应该在值更改时自动触发内部 'change.select2' 事件以更新显示。但是，这至少提供了一种简单的方法来更新显示以匹配新值，而无需触发自定义更改事件处理程序。
-
this '$(element).val(val).trigger('change.select2');'为我工作。谢谢@minlare。
在设置 select2 中选择的字符串选项时遇到一些麻烦：
使用选项：“option string1 /option”使用：
$('#select').val("string1").change();
但是带有一个带有值的选项：选项值 "E" string1 /option :
$('#select').val("E").change(); // you must enter the Value instead of the string
希望这可以帮助遇到同样问题的人。
【讨论】：
如果您想选择单个值，请使用
$('#select').val(1).change()
如果您想选择多个值，则在数组中设置值，以便您可以使用此代码
$('#select').val([1,2,3]).change()
【讨论】：
-
如果您在方括号下输入字符串，这将不起作用。
对于 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
【讨论】：
-
尝试触发('change.select2').trigger('select2:select');如果仅仅改变还不够
这样做
$('select#id').val(selectYear).select2();
【讨论】：
-
虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。
-
我不了解 JqGrid 但使用此代码您可以以简单的方式更改 select2 值
我的预期代码：
$('#my-select').val('').change();
感谢@PanPipes 提供了有用的工作。
【讨论】：
如果您有 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
}
});
});
【讨论】：
如果您想在知道下拉列表中的文本但不知道值的情况下设置选定项，这里是一个示例：
假设你想出了一个时区并想设置它，但值中有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');
【讨论】：
你可以简单地使用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
【讨论】：
// 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
}
});
});
【讨论】：