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

Select2 hat ihre 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 der folgende Weg der aktualisierte Weg ist, dies zu tun:

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

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

Definiere 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')

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

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

Ich verwende Version 4.0.3

Referenz

Laut Select2-Dokumentation

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.

Benutze das :

$('.select').val([]).trigger('change');

AUSGEWÄHLTE WERTE ENTFERNEN

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

OPTIONALWERTE LÖSCHEN

$('#employee_id').html('');

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

Zuerst müssen Sie select2 folgendermaßen definieren:

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

Um select2 zurückzusetzen, können Sie einfach den folgenden Codeblock verwenden:

$("#id > option").removeAttr("selected");
$("#id").trigger("change");

Dies ist der richtige Weg:

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

Ich verwende die neueste Version von Select2.

Sie können die Auswahl mit löschen

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

Aber es wird Sie nicht zu Ihrem Platzhalter zurückkehren.

Es ist also eine halbe Lösung

Verwenden Sie Folgendes zum Konfigurieren von select2 

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

Und um die Auswahl zu löschen, programmgesteuert

    $("#selectelementid").val("").trigger("change");
    $("#selectelementid").trigger("change");

Für Benutzer, die Remote-Daten laden, setzt this die select2 auf den Platzhalter zurück, ohne ajax auszulösen. Funktioniert mit v4.0.3:

$("#lstProducts").val("").trigger("change.select2");

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

Wenn dies geschieht, bedeutet dies normalerweise, dass Sie keinen <option></option> als erste Option in Ihrem <select> enthalten.

wie in:

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

Ich hatte auch dieses Problem und es stammt von val(null).trigger("change");, die einen No select2/compat/inputData-Fehler auslöst, bevor der Platzhalter zurückgesetzt wird. Ich habe es gelöst, indem ich den Fehler abgefangen und den Platzhalter direkt gesetzt habe (zusammen mit einer Breite). Hinweis: Wenn Sie mehr als einen haben, müssen Sie jeden 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 lasse Select2 4.0.3 laufen

ab v.4.0.x ...

um die Werte zu löschen, aber auch die Platzhalter-Verwendung wiederherstellen ...

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

wenn es leer ist, wird stattdessen die erste Option ausgewählt, die möglicherweise nicht Ihren Wünschen entspricht

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

um ehrlich zu sein ... Select2 ist so schmerzhaft im Hintern.

Für den Platzhalter

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

Zurücksetzen einer Auswahl 2

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

Hoffe das hilft 

Mit select2 Version 3.2 funktionierte das für mich:

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

Musste initSelection nicht implementieren

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 nur das Auswahlfeld leeren, ohne einen Platzhalter beizubehalten:

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

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

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

Ich habe die oben genannten Lösungen ausprobiert, aber es hat 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();
});

Nachdem ich die ersten 10 Lösungen hier ausprobiert hatte und fehlgeschlagen bin, habe ich diese Lösung gefunden, um zu funktionieren (siehe "nilov hat am 7. April kommentiert.

(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 zeigte ursprünglich var $select = $(this[1]);, die ein Kommentator zu var $select = $(this[0]); korrigierte, was ich oben gezeigt habe.)

Verwenden Sie diesen Code in Ihre js-Datei

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

Die DOM-Schnittstelle verfolgt bereits den Ausgangszustand ... 

Folgendes ist also ausreichend: 

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

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

$('myselectdropdown').select2('val', '0')

dabei ist 0 der erste Wert der Dropdown-Liste

Nun, wann immer ich es tat 

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

Nach drei bis vier Auslösern bekam ich eine gewisse Verzögerung. Ich nehme an, es gibt ein Gedächtnisleck. Es ist nicht in meinem Code, denn wenn ich diese Zeile entferne, ist meine App verzögerungsfrei.

Da ich die allowClear-Optionen auf true gesetzt habe, bin ich mit gegangen

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

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

Bevor Sie den Wert mit dieser $("#customers_select").select2("val", "");.__ löschen, setzen Sie den Fokus auf einen anderen Steuerelement.

Dadurch wird der Platzhalter wieder angezeigt.

Eine sehr harte Art, es 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 select-Element muss eine leere Option vorhanden sein

Ich mache das für diesen Fall:

  $('#select').val('');
  $('.select2.select2-container').remove();
  $('.select2').select2();

1. Ich ändere den Auswahlwert in leer
2. Ich entferne den Container für select2
3. Wählen Sie select2 erneut an

Mit Select2 Version 4.0.9 funktioniert das für mich:

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

Ich weiß nicht, ob jemand anderes dies erlebt hat, aber sobald der Code den Auslöser ('change') drückte, hörte mein Javascript auf, wurde nie vom Auslöser zurückgegeben und der Rest der Funktion wurde nie ausgeführt. 

Ich bin nicht vertraut mit jquerys Auslöser, um zu sagen, dass dies nicht erwartet wird. Ich bin damit umgekommen, indem ich es in einem setTimeout verpackt habe, hässlich, aber effektiv.