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

Question

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

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

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

但是我该如何取消选择项目？谢谢。

Answer 1

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

但是您可以获取选定值的数组，从数组中删除值，然后将数组返回给控件。

---

选择 2 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

---

选择 2 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