如何用JqGrid更改select2下拉的选择值?

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”、“蔬菜”、“Meat”和下拉列表默认为“Any”，那么我将如何在JqGrid事件加载完成时将其更改为“Fruit”?

Is this possible?

这是可能的吗?

14 个解决方案

#1

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

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

Solution 2: Causes JUST select2 change event to trigger

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

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

看看这些例子。感谢@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-select').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:

关于选择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');

#2

Looking at the select2 docs you 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). val is now called directly

@PanPipes指出这已经改变了4个。x(给他投一票)。val现在被直接调用。

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

$(" #选择”).val(“CA”);

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

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

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()到需要进行选择的完整对象。如果您正在附加一个select元素，这个函数已经为您提供了。

#3

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

this should be of help.

这应该是有帮助的。

#4

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:

只是想增加第二个答案。如果您已经将select作为select2，那么您将需要在选择器中反映如下:

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

#5

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中。

#6

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

如果您想添加新值='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");
   

#7

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

在select2中设置字符串选项时遇到一些问题:

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

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

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

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

但是有一个选项有一个值:选项值“E”string1 /选项:

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

Hopes this help someone struggling with the same issue.

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

#8

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');

#9

My Expected code :

我预期的代码:

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

working perfectly thank to @PanPipes for the usefull one.

非常感谢@PanPipes的使用。

#10

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()

#11

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

#12

do this

这样做

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

#13

// 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
        }
    });
});

Font : Select 2 documentation

字体:选择2个文档。

#14

if you have ajax data source please refer this for bugs free

如果您有ajax数据源，请参考这一信息。

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

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

// Set up the Select2 control

//设置Select2控件。

$('#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
        }
    });
});