Select2 multiple-select - programmatically deselect/unselect item

Question

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

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.

Answer 1

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:

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:

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, using <select> element

JSFiddle for Select2 v3, using hidden input element

Answer 2

As you've indicated in your question, you can modify the state of the underlying select element and then trigger a change. So then you can simply deselect an option in the same way you might with a regular select.

Assuming an option of value "val", the following code would deselect it:

$("#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

I don't see anything to "deselect" an element. But, you can get the list of currently selected elements, remove your element and then set the value.

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 4

If you do not have any other event listener action on select option better :

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