How to clean completely select2 control?
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?
Whenever you alter or change a value in select2 try to use the trigger ("change")
:
$('#sel').empty().trigger("change");
Try this from official select2 documentations.
version 4
$("#sel").val(null).trigger("change");
For version 3.5.3
$("#sel").select2("val", "");
Why all this trouble???
use:
$('#sel').select2('data', null);
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.
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.