it-swarm.com.de

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

Wie setze ich den Platzhalter auf den Wert, der von select2 zurückgesetzt wird? In meinem Beispiel Wenn auf Standorte oder Grade-Auswahlfelder geklickt wird und my select2 einen Wert hat, sollte der Wert von select2 den Standardplatzhalter zurücksetzen und anzeigen. Dieses Skript setzt den Wert zurück, zeigt jedoch den Platzhalter nicht 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;
   }
});
169
fefe

Sie müssen select2 als definieren

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

Um das select2 zurückzusetzen

$("#customers_select").select2("val", "");
200
AbdelMalek

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

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

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

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

Ich verwende Version 4.0.3

Referenz

Laut Select2-Dokumentation

34
M.Tae

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.

15

Benutze das :

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

AUSGEWÄHLTE WERTE ENTFERNEN

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

OPTIONALWERTE LÖSCHEN

$('#employee_id').html('');
10
Shanka SMS

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

7
Sean

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");
5
Mahmut Aydın

Dies ist der richtige Weg:

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

Ich verwende die neueste Version von Select2.

4
TreeZ

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

4
Rodrigo Butta

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");
3
Chad Kuehn

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>
2
fmsf

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

2
Aba

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.

1
mangonights

Für den Platzhalter

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

Zurücksetzen einer Auswahl 2

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

Hoffe das hilft 

1
Rinto George

Mit select2 Version 3.2 funktionierte das für mich:

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

Musste initSelection nicht implementieren

1
shak

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

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

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

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

0
guero64

Verwenden Sie diesen Code in Ihre js-Datei

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

Die DOM-Schnittstelle verfolgt bereits den Ausgangszustand ... 

Folgendes ist also ausreichend: 

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

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');
    });
0
Daniel Ortegón
$('myselectdropdown').select2('val', '0')

dabei ist 0 der erste Wert der Dropdown-Liste

0

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.

0
user2243380

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
0
Ellery Newcomer

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
0
Scramble

Mit Select2 Version 4.0.9 funktioniert das für mich:

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

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.

0
rgvtim