Clearing-Auswahl funktioniert nicht in select2

Question

Ich habe select2 Widget, Version 4 implementiert. Es funktioniert, aber das Symbol x. Es löscht die Auswahl nicht.

Wenn Sie dieses Dokument sehen: https://select2.github.io/options.html, heißt es, dass dies ein Problem in der Tat, aber die Dokumentation ist dafür unvollständig.

Wer hat das schon gelöst?

Dank Jaime

Answer 1

Endlich habe ich fand es einen Fehler in Select2 4.0.2 ist.

Die Lösung ist das, in select2.js, Linie 1760.

Dieser ersetzt werden muss:

this.$element.val(this.placeholder.id).trigger('change'); 

this.trigger('toggle', {}); 

Von:

this.$element.val(this.placeholder.id).text(this.placeholder.text).trigger('change'); 

//this.trigger('toggle', {}); 

Diese Lösung auch die Drop-down verursacht nicht erscheint, wenn die Auswahl gelöscht ist.

Answer 2

Nein, es ist kein Fehler. Das Symbol "X" erfordert eine Platzhalteroption. Ohne diese Option kann die Option clearAllow nicht verwendet werden. So wird rechts Code wie folgt sein:

$(".js-example-placeholder-single").select2({ 
    placeholder: "Put some text...", 
    allowClear : true 
}); 

By the way, gibt es nicht dokumentierte Option Debug genannt. Wenn Sie es an select2() Methode übergeben, werden die gefundenen Fehler auf der Konsole gedruckt. in unten Zum Beispiel Code:

$(".js-example-placeholder-single").select2({ 
    //placeholder: "Put some text...", 
    allowClear : true, 
    debug: true 
    }); 

Wird in Browser-Konsole erhalten:

Warum allowClear Platzhalter Option erfordert?

Die wirkliche Dropdown-Liste, die Sie mit <select> und <option> Elemente erstellen versteckt durch select2. Und schuf einen neuen.

In der neu erstellten Dropdown-Liste wird das Feld, das Benutzer sehen (ohne Dropdown-Liste), automatisch erstellt. Jedes Mal, wenn Sie eine neue Option auswählen, ändert select2 das vorherige Feld mit einem neuen Feld.

Wenn das X-Symbol angeklickt wurde, löscht es auch das Hauptfeld. Und erstellt ein neues Feld mit Parametern des Platzhalters.

Answer 3

In meinem Fall funktioniert der Clear-Button nicht, selbst wenn die Platzhalteroption gesetzt ist. Ich muss Z-Index-Eigenschaft hinzufügen:

.select2-container .select2-selection--single .select2-selection__rendered { 
    z-index:1; 
}