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

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

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

因此，当我单击“external_btn”按钮时，将在 select2 上选择“ca”项目。

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

似乎没有内置函数可以通过编程方式从多选 Select2 控件中取消选择/取消选择选项。 （看这次讨论 https://github.com/ivaynberg/select2/issues/535.)

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

选择2 v4：

以下代码适用于 Select2 v4。只要该控件受支持，它也适用于 Select2 v3<select>元素，而不是隐藏的输入元素。 （注意：当使用 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();
    }
}

用于 Select2 v4 的 JSFiddle https://jsfiddle.net/2q2836xm/

用于 Select2 v3 的 JSFiddle https://jsfiddle.net/7zfpc21d/

选择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 用于 Select2 v3，使用<select> element https://jsfiddle.net/xhzhrp8y/

JSFiddle for Select2 v3，使用隐藏输入元素 https://jsfiddle.net/ur2jfqoL/