How to remove select2 from dom

JavascriptJquery Select2

Javascript Problem Overview


Say we have a simple select2 list:

<select id="e1">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

Initiated like:

$("#e1").select2();

How can I remove select2 and return it to a regular dropdown? I can't find any examples or entry in documentation.

Something like:

$("#e1").select2('remove'); 

would be nice.

Javascript Solutions


Solution 1 - Javascript

You need to use destroy method on select2. See the Documentation

i.e

 $("#e1").select2('destroy'); 

Solution 2 - Javascript

That work for me!

var $select = $('.select2').select2();
//console.log($select);
$select.each(function(i,item){
  //console.log(item);
  $(item).select2("destroy");
});

Solution 3 - Javascript

Version 4.0

$element.data('select2').destroy();

Solution 4 - Javascript

$(".select2").select2('destroy');
$(".select2").val('Your Value');
$('.select2').each(function () {
    $(this).select2({ dropdownParent: $(this).parent() });
});

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionjdennisonView Question on Stackoverflow
Solution 1 - JavascriptPSLView Answer on Stackoverflow
Solution 2 - JavascriptjcmordanView Answer on Stackoverflow
Solution 3 - JavascriptNasri ZhangView Answer on Stackoverflow
Solution 4 - JavascriptCTPL Developer 6View Answer on Stackoverflow