Setzen Sie den Wert select2 zurück und zeigen Sie den Platzhalter an

212

Wie setze ich den Platzhalter auf den Wert, der durch select2 zurückgesetzt wird? In meinem Beispiel Wenn Standorte oder Notenauswahlfelder angeklickt werden und mein select2 einen Wert hat, sollte der Wert von select2 zurückgesetzt und der Standardplatzhalter angezeigt werden. Dieses Skript setzt den Wert zurück, zeigt jedoch keinen Platzhalter an

$("#locations, #grade ").change(function() {
   $('#e6').select2('data', {
     placeholder: "Studiengang wählen",
     id: null,
     text: ''
   });
});

$("#e6").select2({
   placeholder: "Studiengang wählen",
   width: 'resolve',
   id: function(e) {
     return e.subject;
   },
   minimumInputLength: 2,
   ajax: {
     url: "index.php?option=com_unis&task=search.locator&tmpl=component&<?php echo JSession::getFormToken() ?>=1",
     dataType: 'json',
     data: function(term, page) {
       return {
         q: term, // search term
         g: $('#grade option:selected').val(),
         o: $('#locations option:selected').val()
       };
     },
     results: function(data, page) {
       return {
         results: data
       };
     }
   },
   formatResult: subjectFormatResult,
   formatSelection: subjectFormatSelection,
   dropdownCssClass: "bigdrop",
   escapeMarkup: function(m) {
     return m;
   }
});
fefe
quelle

Antworten:

238

Sie müssen select2 als definieren

$("#customers_select").select2({
    placeholder: "Select a customer",
    initSelection: function(element, callback) {                   
    }
});

So setzen Sie select2 zurück

$("#customers_select").select2("val", "");
AbdelMalek
quelle
7
Ich habe dies mit einem <select multiple> versucht, erhalte jedoch die folgende Fehlermeldung: Die Option 'initSelection' ist für Select2 nicht zulässig, wenn sie an ein <select> -Element angehängt ist.
Sorin Postelnicu
14
Das funktioniert bei mir nicht. Der Platzhalter wird immer noch nicht angezeigt.
bcr
5
Siehe die Antwort von @Lego Stormtroopr unten, die die neue Methode gemäß der API von Select2 widerspiegelt. Die obige Methode ist veraltet.
David
14
Ab Version 4.0.3 scheint es nicht mehr zu .select2("val", "")funktionieren.
Adamj
30
$("#customers_select").val('').trigger('change') ;Ich habe das benutzt und es hat funktioniert.
Akshay Kulkarni
125

Select2 hat seine API geändert:

Select2: Die select2("val")Methode ist veraltet und wird in späteren Select2-Versionen entfernt. Verwenden Sie stattdessen $ element.val ().

Der beste Weg, dies jetzt zu tun, ist:

$('#your_select_input').val('');

Bearbeiten: Dezember 2016 Kommentare deuten darauf hin, dass das Folgende die aktualisierte Methode ist, um dies zu tun:

$('#your_select_input').val([]);
Hakan Fıstık
quelle
135
Dadurch wird der Wert aktualisiert. Damit er jedoch korrekt angezeigt wird, müssen Sie ein Änderungsereignis auslösen. $('#your_select_input').val('').trigger('change')
Saneem
5
Das funktioniert bei mir nicht. Der Platzhalter wird immer noch nicht angezeigt.
bcr
3
Dies funktioniert bei mir mit dem changeTrigger-Zusatz, löst aber auch die von uns verwendete Validierungsbibliothek aus - für den Moment muss ich die veraltete Version verwenden.
Dave Newton
6
Dies funktioniert mit select2 4.0.2 nicht richtig. Die Auswahl wird zurückgesetzt und der Platzhalter wiederhergestellt. Wenn ich jedoch einen neuen Wert auswähle (nach dem Zurücksetzen), wird auch eine Option "Leere Zeichenfolge" ausgewählt (dh ein Feld mit nur einem "x").
Kounoupis
1
$ ('# your_select_input'). val (''). trigger ('change') funktioniert nur, wenn ein Platzhalter angegeben ist. Andernfalls wird die Option für leere Zeichenfolgen als ausgewählte Option angezeigt.
Amol
115

Die akzeptierte Antwort funktioniert in meinem Fall nicht. Ich versuche das und es funktioniert:

Definieren Sie select2:

$("#customers_select").select2({
    placeholder: "Select a State",
    allowClear: true
});

oder

$("#customers_select").select2({
    placeholder: "Select a State"
});

Zurücksetzen:

$("#customers_select").val('').trigger('change')

oder

$("#customers_select").empty().trigger('change')
NorthCat
quelle
2
Ich habe festgestellt, dass allowClear nicht funktioniert, wenn Sie den Platzhalter nicht definiert haben
Dan Tappin
Weder $('#your_select_input').val('').trigger('change')noch $('#your_select_input').val('');funktioniert nicht in Firefox
Alex Art.
1
Dies funktioniert für mich, es löscht alle Daten aus der select2, die ich verwende v4.0.3
ClearBoth
8
$ ("# customers_select"). empty (). trigger ('change') funktioniert bei mir. :)
Munna Khan
1
'$ ("# customers_select"). empty (). trigger (' change ')' hat bei mir funktioniert, danke!
Tahirhan
52

Das einzige, was für mich funktionieren kann, ist:

$('select2element').val(null).trigger("change")

Ich benutze Version 4.0.3

Referenz

Laut Select2-Dokumentation

M.Tae
quelle
2
Ich benutze auch v4.0.3 und $('select2element').val("").trigger("change")funktioniert auch gut.
Roubi
Bitte beachten Sie, dass Sie auch eine leere <Option> in Ihrer <Auswahl> haben müssen. Wenn Sie Ajax mit select2 verwenden, hilft dies - $ ('# selectFieldId'). Prepend ('<option selected = "selected"> </ option>')
musicjerm
19

Mit Select2 Version 4.0.9 funktioniert dies für mich:

$( "#myselect2" ).val('').trigger('change');
IlludiumPu36
quelle
1
Dies machte mein select2 Dropdown leer. Hat für mich gearbeitet. Vielen Dank.
Disha
18

Select2 verwendet eine bestimmte CSS-Klasse. Eine einfache Möglichkeit zum Zurücksetzen ist:

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

Und Sie haben den Vorteil, dass wenn Sie mehrere Select2 in derselben Form haben, alle mit diesem einzigen Befehl zurückgesetzt werden.

Marcio Mazzucato
quelle
15

Benutze das :

$('.select').val([]).trigger('change');
Sachin Gend
quelle
Für mich arbeitete mit $ ('. Select2'). Val ([]). Trigger ('change');
Marcelo Agimóvel
11

AUSGEWÄHLTEN WERT ENTFERNEN

$('#employee_id').select2('val','');

OPTIONSWERTE LÖSCHEN

$('#employee_id').html('');
Shanka SMS
quelle
1
fefe bittet darum, den Platzhaltertext zurückzusetzen. Daher ist nur der erste Teil dieser Antwort gültig.
Zwischenzeiten
2
Ja, deshalb hebe ich den Antworttitel hervor.
Shanka SMS
2
Die erste Antwort trifft in der Tat ab> 4.0 nicht mehr zu. Aber die zweite Option hat mich gerettet! Dies ist die Lösung, wenn Sie select2 wirklich löschen möchten. Nur das .val ('') auf 2 zu setzen, reicht nicht aus. Sie müssen auch das HTML löschen. Vielen Dank!!!
Wazza
8

Ich weiß, dass dies eine alte Frage ist, aber dies funktioniert für die select2-Version 4.0

 $('#select2-element').val('').trigger('change');

oder

$('#select2-element').val('').trigger('change.select2'); 

wenn Sie Änderungsereignisse daran gebunden haben

Sean
quelle
Hervorragende Lösung. Ich musste die Funktion .last () hinzufügen, um auf das neu hinzugefügte Feld select2 abzuzielen. $('#select2-element').last().val('').trigger('change.select2');
InsParbo
8

Verwenden Sie Folgendes, um select2 zu konfigurieren

    $('#selectelementid').select2({
        placeholder: "Please select an agent",
        allowClear: true // This is for clear get the clear button if wanted 
    });

Und um die Eingabe programmgesteuert zu löschen

    $("#selectelementid").val("").trigger("change");
    $("#selectelementid").trigger("change");
Zabith Rafeek
quelle
7

Das ist der richtige Weg:

 $("#customers_select").val('').trigger('change');

Ich verwende die neueste Version von Select2.

TreeZ
quelle
6

Zunächst müssen Sie select2 folgendermaßen definieren:

$('#id').select2({
    placeholder: "Select groups...",
    allowClear: true,
    width: '100%',
})

Zum Zurücksetzen von select2 können Sie einfach den folgenden Codeblock verwenden:

$("#id > option").removeAttr("selected");
$("#id").trigger("change");
Mahmut Aydın
quelle
6

Sie können die Auswahl durch löschen

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

Aber es wird Sie nicht zurück zu Ihrem Platzhalter bringen.

Es ist also eine halbe Lösung

Rodrigo Butta
quelle
5

Ich habe die oben genannten Lösungen ausprobiert, aber es hat bei mir nicht funktioniert.

Dies ist eine Art Hack, bei dem Sie keine Änderung auslösen müssen.

$("select").select2('destroy').val("").select2();

oder

$("select").each(function () { //added a each loop here
        $(this).select2('destroy').val("").select2();
});
tech_boy
quelle
5

Für Anwender , Datenfern Laden, dies wird den select2 auf den Platzhalter zurücksetzen , ohne Ajax abzufeuern. Funktioniert mit v4.0.3:

$("#lstProducts").val("").trigger("change.select2");
Chad Kuehn
quelle
Arbeitete für mich, aber mein Auslöser war nur "Veränderung"
Gregory R. Sudderth
Dies war die einzige Lösung, die für mich funktioniert hat, um einen Select2 mithilfe von Ajax-Daten von einem anderen Select2 zurückzusetzen.
IlludiumPu36
5

Um das Formular zurückzusetzen, haben einige von Ihnen eine Schaltfläche zum Zurücksetzen. Fügen Sie den folgenden Code in das Skript-Tag ein

$('.your_btn_class').click(function(){
    $('#select_field_id').val([]);
    $("#select_field_id").select2({
    placeholder: "this is a placeholder",
    });
});

Oder einfach das Auswahlfeld leeren, ohne einen Platzhalter zu behalten:

$('.your_btn_class').click(function(){
    $('#select_field_id').val([]);
 });
Alisha Lamichhane
quelle
3

Für den Platzhalter

$("#stateID").select2({
    placeholder: "Select a State"
});

So setzen Sie eine Auswahl zurück 2

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

Hoffe das hilft

Rinto George
quelle
2

Befolgen Sie die empfohlene Vorgehensweise. Gefunden in der Dokumentation https://select2.github.io/options.html#my-first-option-is-being-displayed-instead-of-my-placeholder (dies scheint ein ziemlich häufiges Problem zu sein):

Wenn dies passiert, bedeutet dies normalerweise, dass Sie kein Leerzeichen haben <option></option> als erste Option in Ihrem haben <select>.

wie in:

<select>
   <option></option>
   <option value="foo">your option 1</option>
   <option value="bar">your option 2</option>
   <option value="etc">...</option>
</select>
fmsf
quelle
2

Ich hatte auch dieses Problem und es ist darauf zurückzuführen val(null).trigger("change");, dass ein No select2/compat/inputDataFehler ausgegeben wurde, bevor der Platzhalter zurückgesetzt wird. Ich habe es gelöst, indem ich den Fehler abgefangen und den Platzhalter direkt (zusammen mit einer Breite) gesetzt habe. Hinweis: Wenn Sie mehr als eine haben, müssen Sie jede fangen.

try{
    $("#sel_item_ID").select2().val(null).trigger("change");
}catch(err){
    console.debug(err)
}
try{
    $("#sel_location_ID").select2().val(null).trigger("change");
}catch(err){
    console.debug(err)
}
$('.select2-search__field')[0].placeholder='All Items';
$('.select2-search__field')[1].placeholder='All Locations';
$('.select2-search__field').width(173);

Ich verwende Select2 4.0.3

Aba
quelle
Es hört sich so an, als hätten Sie einen Listener, der an das changeEreignis gebunden ist . Versuchen Sie es mit Auslösen change.select2- das löst keine gebundenen Listener aus (siehe github.com/select2/select2/issues/3620 ).
Paul
2

ab v.4.0.x ...

um die Werte zu löschen, aber auch die Platzhalternutzung wiederherzustellen ...

.html('<option></option>');  // defaults to placeholder

Wenn es leer ist, wird stattdessen das erste Optionselement ausgewählt, das möglicherweise nicht Ihren Wünschen entspricht

.html(''); // defaults to whatever item is first

Ehrlich gesagt ... Select2 ist so ein Schmerz im Hintern, es wundert mich, dass es nicht ersetzt wurde.

Mangonights
quelle
1

Ich habe die oben genannten Lösungen ausprobiert, aber keine hat mit Version 4x funktioniert.

Was ich erreichen möchte, ist: Alle Optionen löschen, aber den Platzhalter nicht berühren. Dieser Code funktioniert für mich.

selector.find('option:not(:first)').remove().trigger('change');
R. Canser Yanbakan
quelle
Wenn Sie selector.find verwenden ('option: not (: first)'). Html (''); es sollte funktionieren.
Wazza
1

Mit select2 Version 3.2 hat das bei mir funktioniert:

$('#select2').select2("data", "");

Musste nicht implementieren initSelection

wackeln
quelle
1
Dies war bei weitem der einfachste Weg für mich, dies zu tun. Die anderen Methoden haben bei mir nicht funktioniert.
Chevybow
1

Nachdem ich die ersten 10 Lösungen hier ausprobiert hatte und fehlgeschlagen war, fand ich, dass diese Lösung funktioniert (siehe "nilov kommentiert am 7. April • bearbeitet" Kommentar unten auf der Seite):

(function ($) {
   $.fn.refreshDataSelect2 = function (data) {
       this.select2('data', data);

       // Update options
       var $select = $(this[0]);
       var options = data.map(function(item) {
           return '<option value="' + item.id + '">' + item.text + '</option>';
       });
       $select.html(options.join('')).change();
   };
})(jQuery);

Die Änderung wird dann vorgenommen:

var data = [{ id: 1, text: 'some value' }];
$('.js-some-field').refreshDataSelect2(data);

(Der Autor hat ursprünglich gezeigt var $select = $(this[1]);, was ein Kommentator korrigiert hat var $select = $(this[0]);, was ich oben zeige.)

guero64
quelle
1

Verwenden Sie diesen Code in Ihrer js-Datei

$('#id').val('1');
$('#id').trigger('change');
Nhoufy
quelle
0

Bevor Sie den Wert damit löschen $("#customers_select").select2("val", ""); Option versuchen Fokus beim Zurücksetzen auf ein anderes Steuerelement zu setzen.

Dadurch wird der Platzhalter erneut angezeigt.

user2243380
quelle
0

Die DOM-Schnittstelle verfolgt bereits den Ausgangszustand ...

Folgendes ist also ausreichend:

$("#reset").on("click", function () {
    $('#my_select option').prop('selected', function() {
        return this.defaultSelected;
    });
});
Andrew Nartey
quelle
0

Na wann immer ich es tat

$('myselectdropdown').select2('val', '').trigger('change');

Nach drei bis vier Auslösern bekam ich eine Art Verzögerung. Ich nehme an, es gibt ein Speicherleck. Es ist nicht in meinem Code enthalten, da meine App verzögerungsfrei ist, wenn ich diese Zeile entferne.

Da ich allowClear-Optionen auf true gesetzt habe, habe ich mich für entschieden

$('.select2-selection__clear').trigger('mousedown');

Darauf kann ein $ ('myselectdropdown') folgen. Select2 ('close'); Ereignisauslöser für das Element select2 dom, falls Sie das Dropdown-Menü für geöffnete Vorschläge schließen möchten.

Akhilesh Balachandder
quelle
0

Ein [sehr] hackiger Weg, dies zu tun (ich habe gesehen, dass es für Version 4.0.3 funktioniert):

var selection = $("#DelegateId").data("select2").selection;
var evt = document.createEvent("UIEvents");
selection._handleClear(evt);
selection.trigger("toggle", {});
  • allowClear muss auf true gesetzt sein
  • Im Auswahlelement muss eine leere Option vorhanden sein
Ellery Newcomer
quelle
0

Meine Lösung ist:

$el.off('select2:unselect')
$el.on('select2:unselect', function (event) {
    var $option = $('<option value="" selected></option>');
    var $selected = $(event.target);

    $selected.find('option:selected')
             .remove()
             .end()
             .append($option)
             .trigger('change');
    });
Daniel Ortegón
quelle
0
$('myselectdropdown').select2('val', '0')

Dabei ist 0 Ihr erster Wert in der Dropdown-Liste

Momaad Jamshed Alam
quelle