Question

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

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

这可能吗？

Answer 1

对于select2版本＆gt; = 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做了一些顽皮的事，我不再喜欢他了。所以系统为我取消选择Bob：

$('#my-select').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网站的注释（参见Deprecated and removed methods）可能对其他人有用：

<强> .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 docs，使用以下内容获取/设置值。

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

@PanPipes指出，这已经改变了4.x（下面给他一个upvote）。 val现在直接调用

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

因此，在jqGrid的loadComplete内，您可以获得所需的任何值，然后设置选择框值。

来自文档的通知

请注意，要使用此方法，您必须定义选项中的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

只想添加第二个答案。如果已将选区渲染为select2 ，则需要在选择器中反映如下：

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

Answer 6

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

向<select>添加新选项：

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

触发<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

我的预期代码：

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

非常感谢@PanPipes的有用之处。

Answer 12

如果您有ajax数据源，请参阅此版本以获取无错误

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

Answer 13

这样做

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

Answer 14

如果您想在知道下拉列表中的文本但不知道其值时设置选定的项目，请举个例子：

假设您想出一个时区并要进行设置，但是值中包含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');

Answer 15

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

字体：Select 2 documentation

Answer 16

您可以简单地使用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

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

16 个答案:

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

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

说明：