Select2 多选 - 以编程方式取消选择/取消选择项目

Posted 2023-05-07

【中文标题】Select2 多选 - 以编程方式取消选择/取消选择项目

【英文标题】：Select2 multiple-select - programmatically deselect/unselect item

【发布时间】：2014-04-05 05:42:48

【问题描述】：

我有一个 select2 列表和一组外部按钮。我想单击外部按钮并取消选择 select2 列表中的相应项目。我知道我可以使用命令从外部值进行项目选择

$("#external_btn").click(function() 
    $("#select2").val("CA").trigger("change");
);  

所以当我点击“external_btn”按钮时，“ca”项会在select2上被选中。

但是我怎样才能取消选择项目呢？谢谢。

【参考方案1】：

似乎没有内置函数可以以编程方式从多选 Select2 控件中取消选择/取消选择选项。 （见this discussion。）

但是你可以获取选中值的数组，从数组中取出值，然后将数组返回给控件。

---

Select2 v4：

以下代码适用于 Select2 v4。只要控件由<select> 元素而不是隐藏的输入元素支持，它也适用于 Select2 v3。 （注意：使用 Select2 v4 时，控件必须由 <select> 元素支持。）

var $select = $('#select');
var idToRemove = 'c4';

var values = $select.val();
if (values) 
    var i = values.indexOf(idToRemove);
    if (i >= 0) 
        values.splice(i, 1);
        $select.val(values).change();
    

JSFiddle for Select2 v4

JSFiddle for Select2 v3

---

Select2 v3：

以下代码适用于 Select2 v3，无论您是使用 <select> 元素还是隐藏的输入元素来支持控件。

var $select = $('#select');
var idToRemove = 'c4';

var values = $select.select2('val'),
    i = values.indexOf(idToRemove);
if (i >= 0) 
    values.splice(i, 1);
    $select.select2('val', values);

JSFiddle for Select2 v3, using <select> element

JSFiddle for Select2 v3, using hidden input element

【讨论】：

这在最新版本的 Select2 中不起作用，但我修复了这个问题并更新了小提琴：jsfiddle.net/9fD2N/17

@andrzej1_1 - 感谢您指出这一点。就在两天前，我回答了一个相关的 Select2 问题，并花了半个多小时来搜索这个答案，看看它是否需要针对 v4 进行更新。我想我找不到它，因为标题在“2”之前有一个空格。我已经更新了我的答案（以及问题的标题）。

我认为$select.val(values).change(); 应该替换为$select.val(values).trigger('change.select2');

【参考方案2】：

正如您在问题中指出的那样，您可以修改基础 select 元素的状态，然后触发更改。因此，您可以像使用常规 select 一样简单地取消选择一个选项。

假设选项值为“val”，以下代码将取消选择它：

$("#select option[value=val]").prop("selected", false)     // deselect the option
                              .parent().trigger("change"); // trigger change on the select

http://jsfiddle.net/9fD2N/3/

【参考方案3】：

我没有看到任何可以“取消选择”元素的内容。但是，您可以获取当前选定元素的列表，删除您的元素，然后设置值。

http://jsfiddle.net/wLNxA/

$("#e8_2").select2(
    placeholder: "Select a state"
);

$('#removeBtn').click(function () 
    // get the list of selected states
    var selectedStates = $("#e8_2").select2("val"),
        index = selectedStates.indexOf('NV'); // we're removing NV, try to find it in the selected states
    if (index > -1) 
        // if NV is found, remove it from the array
        selectedStates.splice(index, 1);
        // and set the value of the select to the rest of the selections
        $("#e8_2").select2("val", selectedStates);
    ;
);

【参考方案4】：

它的作品。

$('SELECTOR').val('').trigger('change')

【参考方案5】：

如果您在选择选项上没有任何其他事件侦听器操作更好：

$("#select2").val("CA").attr('checked', 'checked'); // to check
$("#select2").val("CA").removeAttr('checked'); // to un-check

【讨论】：

select 元素的“checked”属性有什么作用？

该属性将选项标记为选中或未选中，拥有它就像选择该选项，没有它就像取消选中该选项。但它不会触发任何额外的事件，此时您可以专门触发更改。

我相信“selected”用于选项，您的代码将此属性应用于选择，而不是选项。

抱歉，我们正在使用复选框，但没有意识到我们在谈论选择 :)。那该回家了。