it-swarm.com.de

Zurücksetzen des Select2-Werts in der Dropdown-Liste mit der Reset-Taste

Was wäre der beste Weg, um das ausgewählte Element auf den Standard zurückzusetzen? Ich verwende die Select2 -Bibliothek. Wenn Sie eine normale Schaltfläche type="reset" verwenden, wird der Wert in der Dropdownliste nicht zurückgesetzt.

Wenn ich also meinen Knopf drücke, möchte ich, dass "Alle" wieder angezeigt wird.

jQuery

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

html

<select id="d" name="d">
  <option selected disabled>All</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
55
J2B

Ich würde so etwas versuchen:

$(function(){
    $("#searchclear").click(function(){
        $("#d").select2('val', 'All');
    });
});
63
thtsigma

Sie können den Wert von select2 auch mit zurücksetzen

$(function() {
  $('#d').select2('data', null)
})

alternativ können Sie 'allowClear': true übergeben, wenn Sie select2 aufrufen, und es wird eine X-Taste zum Zurücksetzen des Werts vorhanden sein.

60
Lenart

Nach der neuesten Version (select2 3.4.5) dokumentiert hier wäre es so einfach wie:

 $("#my_select").select2("val", "");
31
Daniel Dener

version 4.0

$('#d').val('').trigger('change');

Dies ist von nun an die richtige Lösung gemäß der veralteten Nachricht, die im Debug-Modus ausgegeben wird: "Die Methode select2("val") wurde nicht mehr unterstützt und wird in späteren Select2-Versionen entfernt. Verwenden Sie stattdessen $element.val()".

29
Ondrej Henek

sie können verwendet werden:

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

Es ist sehr einfach und funktioniert einwandfrei! Bei Verwendung der Rücksetztaste:

$('#btnReset').click(function() {
    $("#d").val(null).trigger("change"); 
});
16
Hoàng Vũ Tgtt

Am besten geht es:

$('#e1.select2-offscreen').empty(); //#e1 : select 2 ID
$('#e1').append(new Option()); // to add the placeholder and the allow clear
7

Ich sehe drei Probleme:

  1. Die Anzeige des Select2-Steuerelements wird nicht aktualisiert, wenn sich der Wert aufgrund eines Formularrücksetzens ändert.
  2. Die Option "Alle" hat kein value-Attribut.
  3. Die Option "Alle" ist deaktiviert.

Zunächst empfehle ich Ihnen, die Funktion setTimeout zu verwenden, um sicherzustellen, dass der Code ausgeführt wird, nachdem das Zurücksetzen des Formulars abgeschlossen ist.

Sie können Code ausführen, wenn Sie auf die Schaltfläche klicken:

$('#searchclear').click(function() {
    setTimeout(function() {
        // Code goes here.
    }, 0);
});

Oder wenn das Formular zurückgesetzt wird:

$('form').on('reset', function() {
    setTimeout(function() {
        // Code goes here.
    }, 0);
});

Was für einen Code zu verwenden ist:

Da die Option "Alle" deaktiviert ist, wird sie durch das Zurücksetzen des Formulars nicht zum ausgewählten Wert. Daher müssen Sie ihn explizit als ausgewählten Wert festlegen. Dies erreichen Sie mit der Select2-Funktion "val". Und da die Option "All" kein value-Attribut besitzt, ist ihr Wert derselbe wie der Text "All". Daher sollten Sie den von thtsigma in der ausgewählten Antwort angegebenen Code verwenden:

$("#d").select2('val', 'All');

Wenn das Attribut value="" zur Option "All" hinzugefügt werden soll, können Sie den von Daniel Dener angegebenen Code verwenden:

$("#d").select2('val', '');

Wenn die Option "Alle" nicht deaktiviert wurde, müssen Sie lediglich die Aktualisierung von Select2 erzwingen. In diesem Fall könnten Sie Folgendes verwenden:

$('#d').change();

Hinweis: Mit dem folgenden Code von Lenart können Sie die Auswahl löschen, die Option "Alle" wird jedoch nicht ausgewählt:

$('#d').select2('data', null)
6
John S

Wenn Sie ein ausgefülltes Auswahl-Widget haben, zum Beispiel:

<select>
    <option value="1">one</option>
    <option value="2" selected="selected">two</option>
    <option value="3">three</option>
    ...

sie sollten select2 davon überzeugen, den ursprünglich ausgewählten Wert beim Zurücksetzen wiederherzustellen, ähnlich wie bei einem nativen Formular. Setzen Sie dazu zunächst das native Formular zurück und aktualisieren Sie anschließend select2:

$('button[type="reset"]').click(function(event) {
    // Make sure we reset the native form first
    event.preventDefault();
    $(this).closest('form').get(0).reset();
    // And then update select2 to match
    $('#d').select2('val', $('#d').find(':selected').val());
}
4
nurikabe

Was ich fand, funktioniert gut wie folgt:

wenn Sie eine Platzhalteroption wie 'Alle' oder '-Select-' haben, ist dies die erste Option. Sie möchten den Wert auf 'Zurücksetzen' setzen, wenn Sie 'Zurücksetzen' verwenden

$('#id').select2('val',0);

0 ist im Wesentlichen die Option, die Sie beim Zurücksetzen auf "0" setzen möchten. Wenn Sie die letzte Option festlegen möchten, ermitteln Sie die Länge der Optionen und legen Sie diese Länge fest. 1. Verwenden Sie grundsätzlich den Index der Option, für die Sie den select2-Wert beim Zurücksetzen festlegen möchten.

Wenn Sie keinen Platzhalter haben und nur möchten, dass im Feld kein Text angezeigt wird, verwenden Sie Folgendes:

$('#id').select2('val','');
2
Guito339

Um eine generische Lösung zu erreichen, warum nicht:

$(':reset').live('click', function(){
    var $r = $(this);
    setTimeout(function(){ 
        $r.closest('form').find('.select2-offscreen').trigger('change'); 
    }, 10);
});

Auf diese Weise: Sie müssen nicht für jedes select2 in Ihrer Anwendung eine neue Logik erstellen.

Und Sie müssen den Standardwert nicht kennen (der übrigens nicht "" oder auch die erste Option sein muss).

Wenn Sie den Wert auf :selected setzen, wird schließlich nicht immer eine echte Rücksetzung erzielt, da das aktuelle selected möglicherweise programmgesteuert auf dem Client festgelegt wurde, während die Standardaktion von form select die Eingabe von Elementwerten an den Server zurückgibt. Gesendete. 

EDIT: In Anbetracht des veralteten Status von live können wir die erste Zeile durch folgende ersetzen:

$('form:has(:reset)').on('click', ':reset', function(){

oder noch besser:

$('form:has(:reset)').on('reset', function(){

PS: Ich persönlich denke, dass das Zurücksetzen beim Zurücksetzen sowie das Auslösen von blur- und focus-Ereignissen, die an das ursprüngliche select angehängt sind, einige der auffälligsten "fehlenden" Funktionen in select2 sind!

1
Ifedi Okonkwo
    // Store default values
    $('#filter_form [data-plugin="select2"]').each(function(i, el){
        $(el).data("seldefault", $(el).find(":selected").val());
        });

    // Reset button action
    $('#formresetbtn').on('click', function() {
        $('#filter_form [data-plugin="select2"]').each(function(i, el){
            $(el).val($(el).data("seldefault")).trigger('change');
            });
        });
0
Ivan Savin

Bei mir funktioniert das nur mit einer dieser Lösungen

$(this).select2('val', null);

oder 

$(this).select2('val', '');
0
Mo.

Da Select2 eine bestimmte CSS-Klasse verwendet, können Sie diese ganz einfach zurücksetzen:

$('.select2-container').select2('val', '');

Wenn Sie mehrere Select2 auf demselben Formular haben, haben Sie den Vorteil, dass alle mit diesem einzigen Befehl zurückgesetzt werden.

0

Manchmal möchte ich Select2 zurücksetzen, kann jedoch nicht ohne change () -Methode Meine Lösung lautet also:

function resetSelect2Wrapper(el, value){
    $(el).val(value);
    $(el).select2({
        minimumResultsForSearch: -1,
        language: "fr"
    });
}

Mit:

resetSelect2Wrapper("#mySelectId", "myValue");
0
Koks_rs