webentwicklung-frage-antwort-db.com.de

Löschen Sie die Dropdown-Liste mit jQuery Select2

Ich versuche, ein Dropdown-Programm mithilfe der fantastischen Select2 - Bibliothek programmgesteuert zu löschen. Die Dropdown-Liste wird dynamisch mit einem Remote-Ajax-Aufruf mit der Option Select2 query gefüllt.

HTML:

<input id="remote" type="hidden" data-placeholder="Choose Something" />

Javascript:

        var $remote = $('#remote');

        $remote.select2({
            allowClear: true,
            minimumInputLength: 2,
            query: function(options){
                $.ajax({
                    dataType: 'json',
                    url: myURL + options.term,
                    error: function(jqXHR, textStatus, errorThrown){
                        smoke.alert(textStatus + ": server returned error on parsing arguments starting with " + options.term);
                    },
                    success: function(data, textStatus, jqXHR){
                        var results = [];
                        for(var i = 0; i < data.length; ++i){
                            results.Push({id: data[i].id, text: data[i].name});
                        }

                        options.callback({results: results, more: false});
                    }
                });
            }
        });

Leider löst der Aufruf von $remove.select2('val', '') die folgende Ausnahme aus:

 Uncaught Error: cannot call val() if initSelection() is not defined

Ich habe versucht, attr einzustellen, val, text und die Select2-spezifische data-Funktion. Kann nicht scheinen, den Kerl klar zu machen und auf eine Art Button zu arbeiten. Hat jemand Vorschläge bekommen?

javascriptjqueryjquery-select2
47
wheaties

Das funktioniert für mich: 

 $remote.select2('data', {id: null, text: null})

Es funktioniert auch mit jQuery validate, wenn Sie es auf diese Weise löschen. 

-- edit 2013-04-09

Zum Zeitpunkt des Schreibens dieser Antwort war dies der einzige Weg. Mit den neuesten Patches ist jetzt ein geeigneter und besserer Weg verfügbar. 

$remote.select2('data', null)
74
Aktee

Im Falle von Select2 Version 4+

es hat die Syntax geändert und Sie müssen so schreiben:

// clear all option
$('#select_with_blank_data').html('').select2({data: [{id: '', text: ''}]});

// clear and add new option
$("#select_with_data").html('').select2({data: [
 {id: '', text: ''},
 {id: '1', text: 'Facebook'},
 {id: '2', text: 'Youtube'},
 {id: '3', text: 'Instagram'},
 {id: '4', text: 'Pinterest'}]});
35
Sruit A.Suk

Dies ist der richtige Wert, select2 löscht den ausgewählten Wert und zeigt den Platzhalter zurück. 

$remote.select2('data', null)
32
Dewey

Mit select2 Version 4 können Sie diese kurze Notation verwenden:

$('#remote').html('').select2({data: {id:null, text: null}});

Dies übergibt ein json-Array mit Null-ID und Text an die select2 bei der Erstellung, leert jedoch zuerst mit .html('') die zuvor gespeicherten Ergebnisse.

15
Lelio Faieta

Für select2 Version 4 verwenden Sie dies einfach:

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

Nach dem Auffüllen des select-Elements mit einem Ajax-Aufruf benötigen Sie möglicherweise die folgende Codezeile im Erfolgsabschnitt, um den Inhalt zu aktualisieren:

  success: function(data, textStatus, jqXHR){
  $('#remote').change();
                }
15
Amin

Sie sollten dieses verwenden:

   $('#remote').val(null).trigger("change");
6
JackWang

Vorgeschlagene Methode @Lelio Faieta arbeitet für mich, aber da ich bootstrap theme verwende, werden alle Bootstrap-Einstellungen für select2 entfernt. Also habe ich folgenden Code verwendet:

$("#remote option").remove();
5
Viktor Shatilo

Ich bin etwas spät dran, aber das funktioniert in der letzten Version (4.0.3):

$('#select_id').val('').trigger('change');
5
Andres SK

Diese beiden funktionieren für mich, um das Dropdown zu löschen:

.select2('data', null)
.select2('val', null)

Aber wichtiger Hinweis: value wird nicht zurückgesetzt. .Val () gibt die erste Option zurück, auch wenn sie nicht ausgewählt ist. Ich verwende Select2 3.5.3

3
realplay

Ab> 4.0 müssen Sie, um die select2 wirklich zu reinigen, Folgendes tun:

$remote.select2.val('');
$remote.select2.html('');
selectedValues = []; // if you have some variable where you store the values
$remote.select2.trigger("change");

Bitte beachten Sie, dass wir select2 anhand der ersten Frage auswählen. In Ihrem Fall wählen Sie das select2 höchstwahrscheinlich auf andere Weise aus.

Ich hoffe es hilft.

1
wazza

Ich habe die Antwort gefunden (Kompliment an user780178), die ich in dieser anderen Frage gesucht habe:

select2-Wert zurücksetzen und Platzhalter anzeigen

$("#customers_select").select2("val", "");
1
Aegix

Sie können dies verwenden oder auf diese weiter verweisen https://select2.org/programmatic-control/add-select-clear-items

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

Dies hat mein Problem in Version 3.5.2 gelöst.

$remote.empty().append(new Option()).trigger('change');

Gemäß diesem Problem benötigen Sie eine leere Option im select-Tag, damit der Platzhalter angezeigt wird.

0
Michał Szymański

Da keiner von ihnen alle für mich gearbeitet hat (select2 4.0.3) ist der std select Weg gegangen.

for(var i = selectbox.options.length - 1 ; i >= 0 ; i--)
    selectbox.remove(i);
0
ManuelSchneid3r