Как убрать полностью select2 control?

Я работаю над удивительным select2 control.

Я пытаюсь очистить и отключить select2 вместе с содержимым, поэтому я делаю это:

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

Хорошо, это работает, но если бы я выбрал значение, все элементы были удалены, элемент управления отключен, но выбранное значение все еще отображается. Я хочу очистить весь контент, чтобы он был показан. Вот пример, который я сделал там, где вы можете увидеть проблему: 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>

код:

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

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

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

CSS

#sel {
    margin: 20px;
}

Есть ли у вас какие-либо идеи или советы?

Ответ 1

Почему все эти проблемы?

использовать:

 $('#sel').select2('data', null);

Ответ 2

Всякий раз, когда вы изменяете или меняете значение в select2, попробуйте использовать триггер ("изменить")

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

Ответ 3

Попробуйте это из официальной документации select2.

версия 4

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

Для версии 3.5.3

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

Ответ 4

Я использую Select2 v4.0 (4.0.6-rc.0)

Использование следующего очищает все значения в раскрывающемся поле:

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

Это полностью удаляет их, и они не могут быть повторно выбраны, пока страница не обновится.

Если все, что вы хотите сделать, это снять выделение, сделайте следующее:

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

Выбранные в настоящий момент параметры будут удалены, и пользователь сможет повторно выбрать нужные параметры.

Ответ 5

Попробуйте следующее: 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");
    });
});

Примечание

$('# s2id_sel > a > span'). text ($ (sel).data('placeholder')); То, что я понимаю, глядя на этот плагин, - это разметка, которую он создает, из выделенного нами объекта, который он предоставляет, генерирует id как # s2id_ + "yourselectelementid". Таким образом, это будет лучший способ использовать его, если у вас есть несколько элементов управления select, и вы хотите отключить только один или один из них.

Если вы хотите удалить содержимое для выбора: - http://jsfiddle.net/G7TXj/

Ответ 6

Как ответил Сарат Кумар:

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

Ссылка из официальной документации, вот ссылка:

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

Ответ 7

Мой select2 в первом варианте - "все". Эта опция очищает другие параметры и выбирается первый вариант

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

    }

Ответ 8

попробуйте использовать это:

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

Ответ 9

Чтобы полностью очистить select2 (> = v4):

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

val (null) → удалить данные формы select
пусто → удалить select опции
select2 (уничтожить) → удалить плагин select2

Затем вы можете создать новый компонент select2 с тем же узлом select HTML, если хотите.