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

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

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", "");

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([]);

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

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

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

Ich benutze Version 4.0.3

Referenz

Laut Select2-Dokumentation

Mit Select2 Version 4.0.9 funktioniert dies für mich:

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

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.

Benutze das :

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

AUSGEWÄHLTEN WERT ENTFERNEN

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

OPTIONSWERTE 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

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

Das ist der richtige Weg:

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

Ich verwende die neueste Version von Select2.

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

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

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

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

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([]);
 });

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

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>

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

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.

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

Mit select2 Version 3.2 hat das bei mir funktioniert:

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

Musste nicht implementieren initSelection

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.)

Verwenden Sie diesen Code in Ihrer js-Datei

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

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.

Die DOM-Schnittstelle verfolgt bereits den Ausgangszustand ...

Folgendes ist also ausreichend:

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

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.

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

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 Ihr erster Wert in der Dropdown-Liste