How to clean completely select2 control?

Question

I'm working with the awesome select2 control.

I'm trying to clean and disable the select2 with the content too so I do this:

$("#select2id").empty();
$("#select2id").select2("disable");

Ok, it works, but if i had a value selected all the items are removed, the control is disabled, but the selected value is still displayed. I want to clear all content so the placeholder would be showed. Here is a example I did where you can see the issue: http://jsfiddle.net/BSEXM/

HTML:

<select id="sel" data-placeholder="This is my placeholder">
    <option></option>
    <option value="a">hello</option>
    <option value="b">all</option>
    <option value="c">stack</option>
    <option value="c">overflow</option>
</select>
<br>
<button id="pres">Disable and clear</button>
<button id="ena">Enable</button>

Code:

$(document).ready(function () {
    $("#sel").select2();

    $("#pres").click(function () {
        $("#sel").empty();
        $("#sel").select2("disable");
    });

    $("#ena").click(function () {
        $("#sel").select2("enable");
    });
});

CSS:

#sel {
    margin: 20px;
}

Do you have any idea or advice to this?

Answer 1

Whenever you alter or change a value in select2 try to use the trigger ("change"):

$('#sel').empty().trigger("change"); 

Answer 2

Try this from official select2 documentations.

version 4

$("#sel").val(null).trigger("change"); 

For version 3.5.3

$("#sel").select2("val", ""); 

Answer 3

To clean completely a select2 (>= v4) component:

$('#sel').val(null).empty().select2('destroy')

• val(null) -> remove select form data
• empty -> remove select options
• select2(destroy) -> remove select2 plugin

Then you can create a new select2 component with the same select HTML node if you want.

Answer 4

I'm using Select2 v4.0 (4.0.6-rc.0)

Using the following clears all of the values in the dropdown field:

$('#id_of_select2_select').empty();

Doing this removes them entirely and they cannot be re-selected until the page refreshes.

If all you want to do is remove the selection, do the following:

$('#id_of_select2_select').val(null).trigger('change');

The currently selected options are cleared and the user will be able to re-select their intended options.