Select2 multiple-select - 以编程方式取消选择/取消选择项目 [英] Select2 multiple-select - programmatically deselect/unselect item

问题描述

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

I have a select2 list and a set of external buttons. I wanted to click the external buttons and unselect corresponding items in the select2 list. I know I can do item selection from external value using the command

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

因此，当我点击external_btn按钮时，将选择ca项目select2。

So when I click on the "external_btn" button, the "ca" item will be selected on the select2.

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

But how I can do item unselection? Thanks.

推荐答案

似乎没有内置函数以编程方式从多选中取消选择/取消选择选项选择2控制。 （参见此讨论。）

There does not appear to be a built-in function to programmatically deselect/unselect an option from a multiple-select Select2 control. (See this discussion.)

但是你可以得到所选值的数组，从数组中删除值，然后将数组返回给控件。

But you can get the array of selected values, remove the value from the array, and then give the array back to the control.

Select2 v4：

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

The following code works for Select2 v4. It also works for Select2 v3 as long as the control is backed by a <select> element, rather than a hidden input element. (Note: When using Select2 v4, the control must be backed by a <select> element.)

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> 元素支持该控件或隐藏的输入元素。

The following code works for Select2 v3, regardless of whether you back the control with a <select> element or a hidden input element.

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，使用< select> 元素

< a href =https://jsfiddle.net/ur2jfqoL/ =nofollow> JSFiddle for Select2 v3，使用隐藏的输入元素

这篇关于Select2 multiple-select - 以编程方式取消选择/取消选择项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！