it-swarm.com.de

Wie reinige ich die select2 Steuerung vollständig?

Ich arbeite mit dem awesome select2 control .

Ich versuche, select2 auch mit dem Inhalt zu säubern und zu deaktivieren, damit ich Folgendes tun kann:

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

Ok, es funktioniert, aber wenn ein Wert ausgewählt wurde, werden alle Elemente entfernt, die Steuerung ist deaktiviert, der ausgewählte Wert wird jedoch weiterhin angezeigt. Ich möchte den gesamten Inhalt löschen, damit der Platzhalter angezeigt wird. Hier ist ein Beispiel, bei dem Sie das Problem sehen können: 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;
}

Hast du eine Idee oder einen Rat dazu?

23
harrison4

Warum so viel Ärger ???

benutzen: 

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

Wann immer Sie einen Wert in select2 ändern oder ändern, versuchen Sie, den Trigger zu verwenden ("change")

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

39
Paulo Araujo

Versuchen Sie es mit offiziellen select2-Dokumentationen.

version 4

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

Für Version 3.5.3

$("#sel").select2("val", "");
24
Sarath Kumar

Ich verwende Select2 v4.0 (4.0.6-rc.0)

Mit dem folgenden Befehl werden alle Werte im Dropdown-Feld gelöscht:

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

Dadurch werden sie vollständig entfernt, und sie können erst wieder ausgewählt werden, wenn die Seite aktualisiert wird.

Wenn Sie nur die Auswahl entfernen möchten, gehen Sie wie folgt vor:

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

Die aktuell ausgewählten Optionen werden gelöscht und der Benutzer kann seine beabsichtigten Optionen erneut auswählen.

2
Jeff Sieffert

So bereinigen Sie eine Komponente select2 (> = V4) vollständig:

$('#sel').val(null).empty().select2('destroy')
  • val (null) -> entferne select Formulardaten
  • leer -> entferne select Optionen
  • select2 (destroy) -> entferne das select2 Plugin

Dann können Sie eine neue select2 - Komponente mit demselben ausgewählten HTML-Knoten erstellen, wenn Sie möchten.

1
Thomas Decaux

Wie antwortete Sarath Kumar:

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

Verweis aus der offiziellen Dokumentation, hier der Link:

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

1

Versuchen Sie Folgendes: - 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");
    });
});

Hinweis 

$ ('# s2id_sel> a> span'). text ($ (sel) .data ('placeholder')); Was ich unter diesem Plugin verstehe, ist das Markup, das es aus dem von uns bereitgestellten select erzeugt, das die ID als # s2id_ + "yourselectelementid" generiert. Dies ist also eine bessere Methode, um es zu verwenden, falls Sie mehrere Auswahlsteuerelemente haben und nur einige oder eine davon deaktivieren möchten.

Wenn Sie den ausgewählten Inhalt löschen möchten: - http://jsfiddle.net/G7TXj/

1
PSL

versuchen Sie es mit diesem:

$('#sel').html('').select2();
0
Omid Ziyaee

Mein select2 in der ersten Option auf "alle". Diese Option löscht die anderen Optionen und die erste Option ist ausgewählt

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

    }
0
gokhan duralı