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

Question

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

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

因此,当我点击"external_btn"按钮时,将在select2上选择"ca"项.

但是如何才能取消选择项目呢？谢谢.

Answer 1

似乎没有内置函数以编程方式从多选Select2控件中取消选择/取消选择选项.(见这个讨论.)

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

选择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();
    }
}

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

JSFiddle for Select2 v3,使用隐藏的输入元素

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

Answer 3

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

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