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.

Conker

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

Intosh

This does not work in newest version of Select2, but I fixed this and updated fiddle: jsfiddle.net/9fD2N/17 – Conventioneer

@Conventioneer - Thanks for pointing this out. I answered a related Select2 question just two days ago and spent over a half hour searching for this answer to see if it needed to be updated for v4. I guess I couldn't find it because the title had a space before the "2". I have updated my answer (and the question's title). – Intosh

I think $select.val(values).change(); should be replaces with $select.val(values).trigger('change.select2'); – Enteron

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/

Salba

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

Gerous

Wow thanks for this answer.it should be marked as the best solution – Nursling

Answer 4

It's works.

$('{SELECTOR}').val('').trigger('change')

Kalahari

Answer 5

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

Hardigg

What does the "checked" attribute do on a select element? – Salba

that attribute is what marks an option as selected or not, having it is like selecting the option and not having it is like unchecking the option. It won't trigger any additional events though, at which point you can trigger a change exclusively. – Hardigg

I believe "selected" is used for options and your code is applying this attribute to the select, not the options. – Salba

Sorry was working with checkboxes and didn't realize we were talking about selects :). time to go home then. – Hardigg