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

How do I change selected value of select2 dropdown with JqGrid?

提问by Adam K Dean

I'm using Oleg's select2 demo, but I am wondering whether it would be possible to change the currently selected value in the dropdown menu.

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

For example, if the four values loaded were: "Any", "Fruit", "Vegetable", "Meat"and the dropdown list defaulted to "Any", how would I be able to change that to "Fruit"in the JqGrid event loadComplete?

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

Is this possible?

这可能吗？

回答by PanPipes

For select2 version >= 4.0.0

对于 select2 版本 >= 4.0.0

The other solutions might not work, however the following examples should work.

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

Solution 1: Causes all attached change events to trigger, including select2

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

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

Solution 2: Causes JUST select2 change event to trigger

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

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

See this jsfiddlefor examples of these. Thanks to @minlare for Solution 2.

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

Explanation:

解释：

Say I have a best friend select with people's names. So Bob, Bill and John (in this example I assume the Value is the same as the name). First I initialize select2 on my select:

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

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

Now I manually select Bob in the browser. Next Bob does something naughty and I don't like him anymore. So the system unselects Bob for me:

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

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

Or say I make the system select the next in the list instead of Bob:

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

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

Notes on Select 2 website (see Deprecated and removed methods) that might be useful for others:

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

.select2('val')The "val" method has been deprecated and will be removed in Select2 4.1. The deprecated method no longer includes the triggerChange parameter.

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

You should directly call .val on the underlying element instead. If you needed the second parameter (triggerChange), you should also call .trigger("change") on the element.

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

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

回答by Hyman

Looking at the select2 docsyou use the below to get/set the value.

查看您使用下面的select2 文档来获取/设置值。

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

@PanPipes has pointed out that this has changed for 4.x (go toss him an upvote below). valis now called directly

@PanPipes 指出 4.x 已经改变了（在下面给他投赞成票）。val现在直接调用

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

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

So within the loadCompleteof the jqGrid you can get whatever value you are looking for then set the selectbox value.

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

Notice from the docs

来自文档的通知

Notice that in order to use this method you must define the initSelection function in the options so Select2 knows how to transform the id of the object you pass in val() to the full object it needs to render selection. If you are attaching to a select element this function is already provided for you.

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

回答by Yasser Shaikh

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

this should be of help.

这应该有帮助。

回答by Neelu

This should be even easier.

这应该更容易。

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

But make sure the values which you pass are already present in the HTMl

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

回答by Trong

If you want to add new value='newValue'and text='newLabel', you should add this code:

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

1. Add new Option to <select>:

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

2. Trigger <select>change to selected value:

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

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

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

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

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

回答by Abram

Just wanted to add a second answer. If you have already rendered the select as a select2, you will need to have that reflected in your selector as follows:

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

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

回答by minlare

You have two options - as @PanPipes answer states you can do the following.

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

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

This is an acceptable solution only if one doesn't have any custom actions binded to the change event. The solution I use in this situation is to trigger a select2 specific event which updates the select2 displayed selection.

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

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

回答by Aldodzb

Having some troubles with setting a String option selected in a select2:

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

With the option: "option string1 /option" used:

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

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

BUT with an option with a value: option value "E" string1 /option :

但是带有一个带有值的选项： option value "E" string1 /option ：

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

Hopes this help someone struggling with the same issue.

希望这有助于有人在同样的问题上苦苦挣扎。

回答by Rmalmoe

For V4 Select2 if you want to change both the value of the select2 and the text representation of the drop down.

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

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

This will set not only the value behind the scenes but also the text display for the select2.

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

Pulled from https://select2.github.io/announcements-4.0.html#removed-methods

摘自https://select2.github.io/announcements-4.0.html#removed-methods

回答by Utkarsh Pandey

if you want to select a single value then use $('#select').val(1).change()

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

if you want to select multiple values then set value in array so you can use this code $('#select').val([1,2,3]).change()

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