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

Posted 2023-05-09

【中文标题】如何使用 JqGrid 更改 select2 下拉列表的选定值？

【英文标题】：How do I change selected value of select2 dropdown with JqGrid?

【发布时间】：2013-11-07 12:42:38

【问题描述】：

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

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

这可能吗？

【参考方案1】：

对于 select2 版本 >= 4.0.0

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

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

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

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

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

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

解释：

假设我有一个最好的朋友，用人们的名字选择。所以 Bob、Bill 和 John（在此示例中，我假设 Value 与名称相同）。首先我在我的选择上初始化 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');  

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

【讨论】：

这是正确的答案：它适用于单选和多选

只有在没有任何自定义操作绑定到change 事件（例如重新加载表单）时，这才是可接受的解决方案。否则，这些操作将在触发 change() 时被冗余调用。

如果这不能正常工作，添加一个 setTimeout： setTimeout(function() $("select").val("1").trigger("change"); , 1000) ;

@van_folmert 我也有同样的问题。理想情况下，我想更改显示为选中的内容，而不触发事件（因为我有一个绑定到 onChange 的自定义事件）

有关如何解决@van_folmert 问题的示例，请参阅下面的答案

【参考方案2】：

查看select2 docs，您可以使用以下内容获取/设置值。

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

@PanPipes 指出这在 4.x 中发生了变化（在下面给他投上一票）。现在直接调用val

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

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

来自文档的通知

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

【讨论】：

似乎不适用于我正在查看的演示。不知道为什么，这可能与它插入 JqGrid 的方式有关。

更新了答案。看起来您必须手动将该函数添加到 select2 初始化中，以便它知道如何处理 val 调用。

@AdamKDean：可以通过在<select> 上测试select2-offscreen 类的存在性来测试<select> 是否转换为select2 控件。搜索工具栏的所有元素都具有以gs_ 前缀开头的id，并具有类似colModel 的名称。您可以使用getGridParam 获取colModel。

谢谢，我已经设法获取过滤器信息，我只需要在使用select2 选择重新创建过滤器栏后设置它。我今天再看看，也许用新的眼睛我可以解决它。再次感谢。更新：将代码包装在布尔检查中解决了我遇到的问题，尽管它停止刷新搜索栏而不是再次选择前一个元素。

现已弃用：github.com/select2/select2/blob/master/dist/js/…

【参考方案3】：

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

这应该会有所帮助。

【讨论】：

多值示例：this.$("#yourSelector").select2("data", [ id: 1, text: "Some Text" , id: 2, text: "其他一些文字"]);

【参考方案4】：

这应该更容易。

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

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

【参考方案5】：

如果你想添加新的value='newValue'和text='newLabel'，你应该添加这个代码：

向<select>添加新选项：

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

触发<select>更改为选定值：

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

【讨论】：

我发现这比弄乱 select2 的“数据”更干净 :) 更改 dom，让 select2 解决剩下的问题。

我正在 Safari 上进行测试，这是唯一有效的解决方案。其他人更有说服力，我更喜欢它们，但最重要的是，我更喜欢工作代码。就是这样。 :)

为此感谢一百万！我正在使用选择 2 个框，其中两个框都填充了 Ajax，我为第一个框使用了额外的数据属性来设置第二个框的值。再次感谢！！！！

【参考方案6】：

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

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

【参考方案7】：

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

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

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

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

【讨论】：

是的，这是最好的全方位解决方案。真的，我认为 Select2 应该在值更改时自动触发内部 'change.select2' 事件以更新显示。但是，这至少提供了一种简单的方法来更新显示以匹配新值，而无需触发自定义更改事件处理程序。

this '$(element).val(val).trigger('change.select2');'为我工作。谢谢@minlare。

【参考方案8】：

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

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

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

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

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

希望这可以帮助遇到同样问题的人。

【参考方案9】：

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

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

【讨论】：

如果您在方括号下输入字符串，这将不起作用。

【参考方案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

【讨论】：

尝试触发('change.select2').trigger('select2:select');如果仅仅改变还不够

【参考方案11】：

这样做

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

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。

我不了解 JqGrid 但使用此代码您可以以简单的方式更改 select2 值

【参考方案12】：

我的预期代码：

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

感谢@PanPipes 提供了有用的工作。

【参考方案13】：

如果您有 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
        
    );
);

【参考方案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'); 

【参考方案15】：

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

【参考方案16】：

// 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