Reimposta il valore select2 e mostra il segnaposto


212

Come posso impostare il segnaposto sul ripristino del valore tramite select2. Nel mio esempio, se si selezionano le posizioni o le caselle di selezione dei voti e il mio select2 ha un valore, il valore di select2 dovrebbe reimpostare e mostrare il segnaposto predefinito. Questo script reimposta il valore ma non mostrerà il segnaposto

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

Risposte:


238

È necessario definire select2 come

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

Per ripristinare la selezione 2

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

7
Ho provato questo con un <seleziona multiplo>, ma ricevo l'errore: l'opzione 'initSelection' non è consentita per Select2 quando è collegata a un elemento <select>.
Sorin Postelnicu,

15
Questo non funziona per me. Il segnaposto non viene ancora visualizzato.
bcr,

5
Vedi di seguito la risposta di @Lego Stormtroopr, che riflette il nuovo metodo secondo l'API di Select2. Il metodo sopra è obsoleto.
David

14
A partire dalla v4.0.3, non sembra .select2("val", "")più funzionare.
adamj,

31
$("#customers_select").val('').trigger('change') ;L'ho usato e ha funzionato.
Akshay Kulkarni,

125

Select2 ha modificato la sua API:

Select2: il select2("val")metodo è stato deprecato e verrà rimosso nelle versioni successive di Select2. Utilizzare invece $ element.val ().

Il modo migliore per farlo ora è:

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

Modifica: dicembre 2016 I commenti suggeriscono che il seguente è il modo aggiornato per farlo:

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

136
Questo aggiorna il valore, ma affinché venga visualizzato correttamente, dovrai attivare un evento di modifica. $('#your_select_input').val('').trigger('change')
Saneem,

5
Questo non funziona per me. Il segnaposto non viene ancora visualizzato.
bcr,

3
Questo funziona per me con l' changeaggiunta del trigger, ma attiva anche la libreria di convalida che stiamo utilizzando - per ora dovrò usare la versione obsoleta.
Dave Newton,

6
Questo non funziona correttamente, usando select2 4.0.2. Ripristinerà la selezione e ripristinerà il segnaposto, ma quando scelgo un nuovo valore (post reset), vedo anche un'opzione "stringa vuota" selezionata (ovvero una casella con solo una "x").
kounoupis

1
$ ('# your_select_input'). val (''). trigger ('change') funziona solo quando viene fornito il segnaposto. altrimenti l'opzione stringa vuota verrà visualizzata come opzione selezionata.
amol

117

La risposta accettata non funziona nel mio caso. Ci sto provando e funziona:

Definisci select2:

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

o

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

Resettare:

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

o

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

2
Ho scoperto che, a meno che tu non abbia definito il segnaposto, allowClear non funziona
Dan Tappin,

$('#your_select_input').val('').trigger('change')$('#your_select_input').val('');non funziona in Firefox
Alex Art.

1
questo funziona per me, cancella tutti i dati da select2 Sto usando v4.0.3
ClearBoth

8
$ ("# customers_select"). empty (). trigger ('change') funziona per me. :)
Munna Khan

1
'$ ("# customers_select"). empty (). trigger (' change ')' ha funzionato per me, grazie!
Tahirhan,

52

L'unica cosa che può funzionare per me è:

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

Sto usando la versione 4.0.3

Riferimento

Secondo la documentazione Select2


2
Sto anche usando v4.0.3 e $('select2element').val("").trigger("change")funziona anche bene.
Roubi,

Nota che devi anche avere una <opzione> vuota all'interno di <seleziona>. Se stai usando ajax con select2, questo aiuterà - $ ('# selectFieldId'). Prepend ('<opzione selezionata = "selezionata"> </option>')
musicjerm

20

Con Select2 versione 4.0.9 questo funziona per me:

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

1
Questo ha reso vuoto il mio menu a discesa select2. Ha funzionato per me. Grazie.
disha,

18

Select2 utilizza una specifica classe CSS, quindi un modo semplice per reimpostarla è:

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

E hai il vantaggio di avere più Select2 nello stesso modulo, tutti verranno reimpostati con questo singolo comando.



11

PER RIMUOVERE IL VALORE SELEZIONATO

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

PER CANCELLARE I VALORI DI OPZIONE

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

1
fefe chiede di reimpostare il testo segnaposto. Quindi è valida solo la prima parte di questa risposta.
nterms

2
Sì, è per questo che metto in evidenza il titolo delle risposte.
Shanka SMS

2
La prima risposta infatti non si applica più da> 4.0. Ma la seconda opzione mi ha salvato! Questa è la soluzione quando si desidera cancellare veramente select2. Basta impostare il .val ('') per selezionare 2 non è abbastanza. Devi anche cancellare l'html. Molte grazie!!!
wazza,

9

So che è una specie di vecchia domanda, ma funziona con la versione 4.0 di select2

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

o

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

se hai eventi di modifica associati ad esso


Soluzione eccellente Ho dovuto aggiungere la funzione .last () per scegliere come target la casella select2 appena aggiunta. $('#select2-element').last().val('').trigger('change.select2');
InsParbo,

8

Utilizzare quanto segue per configurare select2

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

E per cancellare selezionare l'ingresso a livello di codice

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

8

Questo è il modo corretto:

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

Sto usando l'ultima versione di Select2.


6

Innanzitutto devi definire select2 in questo modo:

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

Per ripristinare select2, è possibile semplicemente utilizzare il seguente blocco di codice:

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

6

È possibile cancellare la selezione tramite

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

Ma non ti riporterà al tuo segnaposto.

Quindi è una mezza soluzione


5

Ho provato le soluzioni sopra ma non ha funzionato per me.

Questo è un tipo di hack, in cui non è necessario attivare il cambiamento.

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

o

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

5

Per gli utenti di caricamento dei dati remoti, questo ripristinerà la select2 al segnaposto senza sparare fuori ajax. Funziona con v4.0.3:

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

Ha funzionato per me, ma il mio innesco è stato solo il "cambiamento"
Gregory R. Sudderth,

Questa è stata l'unica soluzione che ha funzionato per me per ripristinare un Select2 da un altro Select2 utilizzando i dati Ajax.
IlludiumPu36

5

Quindi, per ripristinare il modulo alcuni di voi avranno un pulsante di ripristino. Aggiungi il seguente codice all'interno del tag script

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

O semplicemente per svuotare il campo selezionato senza mantenere un segnaposto:

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

3

Per il segnaposto

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

Per ripristinare una selezione 2

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

Spero che questo ti aiuti


2

Seguendo il modo raccomandato di farlo. Trovato nella documentazione https://select2.github.io/options.html#my-first-option-is-being-displayed-instead-of-my-placeholder (questo sembra essere un problema abbastanza comune):

Quando ciò accade, di solito significa che non hai uno spazio <option></option>come prima opzione nel tuo <select>.

come in:

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

2

Avevo anche questo problema e deriva da val(null).trigger("change");un No select2/compat/inputDataerrore prima che il segnaposto venga ripristinato. L'ho risolto rilevando l'errore e impostando direttamente il segnaposto (insieme a una larghezza). Nota: se ne hai più di uno, dovrai catturarli ciascuno.

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

Sto eseguendo Select2 4.0.3


Sembra che tu abbia un ascoltatore associato changeall'evento. Prova ad attivare change.select2- ciò non attiverà i listener associati (vedi github.com/select2/select2/issues/3620 ).
Paul

2

dalla v.4.0.x ...

per cancellare i valori, ma anche ripristinare il segnaposto utilizzare ...

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

se è vuoto, selezionerà invece la prima voce dell'opzione che potrebbe non essere quella desiderata

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

francamente ... Select2 è un tale dolore nel sedere, mi stupisce che non sia stato sostituito.


1

Ho provato sopra le soluzioni ma nessuna ha funzionato con la versione 4x.

Quello che voglio ottenere è: deselezionare tutte le opzioni ma non toccare il segnaposto. Questo codice funziona per me.

selector.find('option:not(:first)').remove().trigger('change');

Se si utilizza selector.find ('opzione: not (: first)'). Html (''); dovrebbe funzionare.
wazza,

1

Usando select2 versione 3.2 questo ha funzionato per me:

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

Non avevo bisogno di implementare initSelection


1
Questo è stato di gran lunga il modo più semplice per me di farlo. Gli altri metodi non hanno funzionato per me.
chevybow

1

Dopo aver provato le prime 10 soluzioni qui e fallendo, ho trovato questa soluzione funzionante (vedi il commento "nilov commentato il 7 aprile • modificato" in fondo alla pagina):

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

La modifica viene quindi effettuata:

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

(L'autore originariamente ha mostrato var $select = $(this[1]);, a cui un commentatore ha corretto var $select = $(this[0]);, che mostro sopra.)


1

Usa questo codice nel tuo file js

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

0

Prima di cancellare il valore utilizzando questa $("#customers_select").select2("val", ""); impostazione, provare a focalizzare qualsiasi altro controllo al clic di ripristino.

Questo mostrerà di nuovo il segnaposto.


0

L'interfaccia DOM, tiene già traccia dello stato iniziale ...

Quindi è sufficiente fare quanto segue:

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

0

Bene ogni volta che l'ho fatto

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

Ho iniziato a ricevere un certo ritardo dopo circa 3-4 trigger. Suppongo che ci sia una perdita di memoria. Non è nel mio codice perché se rimuovo questa riga, la mia app è senza ritardi.

Dato che le opzioni di allowClear sono impostate su true, sono andato con

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

Questo può essere seguito da $ ('myselectdropdown'). Select2 ('close'); trigger di evento sull'elemento select2 dom nel caso in cui desideri chiudere il menu a discesa dei suggerimenti aperti.


0

Un modo [molto] confuso per farlo (l'ho visto funzionare per la versione 4.0.3):

var selection = $("#DelegateId").data("select2").selection;
var evt = document.createEvent("UIEvents");
selection._handleClear(evt);
selection.trigger("toggle", {});
  • allowClear deve essere impostato su true
  • un'opzione vuota deve esistere nell'elemento select

0

La mia soluzione è:

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.