javascript - How to clean completely select2 control? - Stack Overflow

admin管理员组

文章数量:1134246

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: /

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?

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?

• javascript
• jquery
• jquery-ui
• jquery-select2

Share Improve this question Follow edited Mar 1, 2018 at 20:23 Igor De Oliveira Sá 62455 silver badges77 bronze badges asked Apr 30, 2013 at 23:31 mllamazaresmllamazares 8,1661919 gold badges6767 silver badges9494 bronze badges 1

• Title is missleading. Please change for future readers. – ManuelSchneid3r Commented May 19, 2017 at 8:26

Add a comment  | 

11 Answers 11

Sorted by: Reset to default 112

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.

As answered Sarath Kumar:

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

Reference from the official documentation, here is the link:

https://select2.org/programmatic-control/add-select-clear-items#clearing-selections

Try this:- http://jsfiddle.net/GqbSN/

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

    $("#pres").click(function () {
      $('#s2id_sel > a > span').text($(sel).data('placeholder')); 
        //$('.select2-container > a > span').text('This is my placeholder');
        $("#sel").select2("disable");;
       });

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

Note

$('#s2id_sel > a > span').text($(sel).data('placeholder')); What i understand looking at this plugin is the markup it creates from the select that we provide it generates id as #s2id_ + "yourselectelementid". So this would be a better way to use it in case you have multiple select controls and you want to disable only the some or one of them.

If you want to clear the select contents:- http://jsfiddle.net/G7TXj/

I tested this code and got the answer:

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

My select2 in first option to "all". This option clears the other options and the first option is selected

var $eventSelect = $("#storeList");
   $("#storeList").on("change", function (e) {
        if (e.added != undefined) {
            if (e.added.id == 0 && e.val.length>1) {
                   removeTags();
                $("#storeList").val('0').select2();

            }

        }

    });

  function removeTags(){
        $eventSelect.select2('data', null);

    }

As per the doc here, you need to use the code as below

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

try using this:

$('#sel').html('').select2();

本文标签： javascriptHow to clean completely select2 controlStack Overflow