如何使用JqGrid更改select2下拉列表的选定值？

Question

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

例如，如果加载的四个值为："任何", "水果", "蔬菜", "肉类"，并且下拉列表默认为"任何"，如何在JqGrid事件loadComplete中将其更改为"水果"？

这是否可行？

- Adam K Dean

Answer 1

针对select2版本 >= 4.0.0

其他解决方案可能无效，但以下示例应该有效。

解决方案1：触发所有已附加的更改事件，包括select2

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

解决方案2：仅在select2更改事件触发时引起

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

参见这个jsfiddle，其中有相关示例。感谢@minlare提供的第二种解决方案。

说明：

假设我有一个最好的朋友选择器，上面有人们的名字，如Bob、Bill和John（在这个例子中我假设值与名字相同）。首先，我在我的选择器上初始化了select2：

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

现在我在浏览器中手动选择了 Bob。接下来，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 参数。

您应直接在底层 <select> 元素上调用 .val。如果需要第二个参数（triggerChange），还应在元素上调用 .trigger("change")。

$('select').val('1').trigger('change'); // instead of $('select').select2('val', '1');

- PanPipes

---

这是正确答案：它适用于单选和多选。 - Giovanni Di Milia

只有在没有将自定义操作绑定到 change 事件（例如重新加载表单）时，这才是可接受的解决方案。否则，在触发 change() 后，这些操作将被冗余地调用。 - van_folmert

请看下面的答案，了解如何解决@van_folmert的问题。 - minlare

所以没有办法按索引选择，只能按实际值选择吗？认真的，这不是好的工程方法... - Natix

@Natix 我没听懂你的问题。你是指通过索引而非值来选择选项吗？ - PanPipes

Answer 2

看一下select2文档，你可以使用以下方法来获取/设置值。

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

@PanPipes 指出这在 4.x 中已经改变（在下面投给他一个点赞）。val 现在直接被调用。

所以在 jqGrid 的 loadComplete 中，您可以获取您正在查找的任何值，然后设置 selectbox 值。

从文档中可以看到：

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

- Jack

---

似乎与我正在查看的演示不兼容。不确定是什么原因，可能与它插入JqGrid的方式有关。 - Adam K Dean

更新了答案。看起来你需要手动将该函数添加到select2的初始化中，以便它知道如何处理val调用。 - Jack

@AdamKDean：可以通过测试<select>是否被转换为select2控件来进行额外的测试，方法是检查<select>上是否存在select2-offscreen类。搜索工具栏的所有元素都有以gs_前缀开头的ID，并且名称与colModel中的名称相同。您可以使用getGridParam获取colModel。 - Oleg

谢谢，我已经成功获取了过滤器信息，现在我只需要一种方法，在使用select2选择器重新创建过滤器栏后进行设置。我今天会再看一下，也许换个角度能解决问题。再次感谢。更新：将代码包装在布尔检查中解决了我的问题，尽管它停止了搜索栏的刷新，而不是再次选择先前的元素。 - Adam K Dean

现已弃用：https://github.com/select2/select2/blob/master/dist/js/select2.full.js#L5560 - Andrey

Answer 3

this.$("#yourSelector").select2("data", { id: 1, text: "Some Text" });

这应该会有所帮助。

- Yasser Shaikh

---

多值示例： this.$("#yourSelector").select2("data", [{ id: 1, text: "一些文本" },{ id: 2, text: "另一些文本" }]); - RodneyRd

Answer 4

如果您想要添加新的value='newValue'和text='newLabel'，您应该添加以下代码：

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

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

2. 触发 <select> 的变化，选中当前值：

$(selLocationID).val('newValue').trigger("change");

- Trong

---

我认为这比调整select2的“数据”更加简洁 :) 修改DOM，让select2自行解决其他问题。 - Paulj

我正在Safari上进行测试，这是唯一真正有效的解决方案。其他方案可能更优雅，我更喜欢它们，但最重要的是，我更喜欢可工作的代码。而这就是它。 :) - David

非常感谢您！我正在使用 Ajax 填充两个 select 选择框，并在第一个选择框中使用额外的数据属性来设置第二个选择框的值。再次感谢您！！！ - Someone

Answer 5

这应该更容易了。

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

但请确保你传递的数值已经存在于HTML中。

- Neelu

Answer 6

我想补充第二个答案。如果你已经将选择框渲染成了select2，那么你需要在选择器中反映出来，代码如下：

$("#s2id_originalSelectId").select2("val", "value to select");

- Abram

Answer 7

你有两个选择 - 正如@PanPipes的回答所述，你可以采取以下措施。

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

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

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

- minlare

---

是的，这是最好的全方位解决方案。实际上，我认为Select2应该自动触发内部的'change.select2'事件来更新显示当值被改变时。但是，至少提供了一种简单的方法来更新显示以匹配新值，而不触发自定义更改事件处理程序。 - DaveInMaine

这个 '$(element).val(val).trigger('change.select2');' 对我很有用。谢谢 @minlare。 - Ray

Answer 8

在设置select2中的一个字符串选项时遇到了一些问题：

使用选项："option string1 /option"：

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

但是有一个带值的选项：选项值"E"字符串1 /选项：

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

希望这篇文章能帮助到和我一样遇到同样问题的人。

- Aldodzb

Answer 9

如果您想同时更改Select2的值和下拉列表的文本表示，针对V4版本，需要进行以下操作。

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。

- Rmalmoe

---

尝试使用 "trigger('change.select2').trigger('select2:select')" 触发事件，如果仅仅改变不足以实现。 - Tebe

Answer 10

执行此操作

 $('select#id').val(selectYear).select2();

- Jaskaran singh Rajal

---

虽然这段代码可能回答了问题，但是提供关于为什么和/或如何回答问题的额外上下文可以提高其长期价值。 - rollstuhlfahrer

我不了解JqGrid，但是通过这段代码，你可以简单地改变select2的值。 - Jaskaran singh Rajal