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

Question

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

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

这可能吗？

Answer 1

对于select2版本> = 4.0.0

其他解决方案可能不起作用,但以下示例应该有效.

解决方案1:触发所有附加的更改事件,包括select2

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

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

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

有关这些的示例,请参阅此jsfiddle.感谢@minlare for Solution 2.

说明:

说我有一个最好的朋友选择与人的名字.所以Bob,Bill和John(在这个例子中我假设Value与名称相同).首先,我在select上初始化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');  

选择2网站的注释(请参阅弃用和删除的方法)可能对其他人有用:

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

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

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

Answer 2

查看select2文档,使用下面的内容来获取/设置值.

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

@PanPipes指出,这已经改变了4.x(下面给他一个upvote).val现在直接调用

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

因此loadComplete,在jqGrid中,您可以获得所需的任何值,然后设置selectbox值.

来自文档的通知

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

Answer 3

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

这应该是有帮助的.

Answer 4

这应该更容易.

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

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

Answer 5

只想添加第二个答案.如果您已将select作为select2渲染,则需要在选择器中反映出如下:

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

Answer 6

如果要添加新的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");
   

Answer 7

您有两个选择 - @PanPipes应答状态您可以执行以下操作.

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

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

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

Answer 8

设置在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

希望这可以帮助有人在同一个问题上挣扎.

Answer 9

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

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

Answer 10

对于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

Answer 11

做这个

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