Question

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

从外部值中选择项目

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

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

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

Answer 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

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

Answer 2

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

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);
    };
});

Answer 3

正如您在问题中指出的那样，您可以修改基础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 4

如果您对select选项没有任何其他事件监听器操作：

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

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

4 个答案: