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

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

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

这可能吗？

432889 次浏览
小开

查看 Select2文件，您可以使用下面的代码来获取/设置值。

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

@ PanPipes 已经指出4.x 版本已经改变了(请在下面投他一个赞成票)。现在直接调用 val

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

因此，在 jqGrid 的 loadComplete中，您可以获得所需的值，然后设置 selectbox 值。

医生的通知

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

小开

我只是想再加一个答案。如果你有 已经将 select 呈现为 select2，你将需要在你的选择器反映如下:

$("#s2id_originalSelectId").select2("val", "value to select");
小开 
this.$("#yourSelector").select2("data", { id: 1, text: "Some Text" });

这个应该能帮上忙。

小开

这应该更简单。

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

但是要确保您传递的值已经在 HTML 中存在

小开
最佳答案

对于 select2 version > = 4.0.0

其他解决方案可能不起作用，但下面的例子应该起作用。

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

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

解决方案2: 导致刚选择2更改事件触发

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

看看这个 Jsfiddle的例子，感谢@minlare 的解决方案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”方法已被废弃，将在 Select24.1中删除。已废弃的方法不再包含 TriggerChange 参数。

你应该直接打电话。而是在基础元素上使用 val。如果需要第二个参数(riggerChange) ，还应该调用。触发器(“ change”)。

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

我的预期代码:

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

工作完美，感谢@PanPipes 为有用的一个。

小开

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

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

小开

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

  1. 在 <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");
小开

在 select2中设置选中的 String 选项时遇到一些问题:

使用“ option string1/option”选项:

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

带有一个值的选项: 选项值“ E”string1/选项:

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

希望这能帮助有同样问题的人。

小开

您有两个选项-作为@PanPipes 的回答状态，您可以执行以下操作。

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

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

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

对于 V4Select2，如果您希望同时更改 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

小开

如果你有 ajax 数据源，请参考这个 bug 自由

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
}
});
});
小开

做这个

 $('select#id').val(selectYear).select2();
小开 
// 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
}
});
});

字体: 选择2个文档

小开

如果你想设置一个选定的项目，当你知道下拉列表中的文本而不知道其值时，这里有一个例子:

假设您计算出了一个时区并希望设置它，但是值中包含 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

提交答案