Cancella il menu a discesa con jQuery Select2

Sto provando a cancellare in modo programmatico un menu a discesa usando la fantastica libreria Select2 . Il menu a discesa viene riempito dynamicmente con una chiamata ajax remota utilizzando l’opzione di query Select2.

HTML:

  

Javascript:

  var $remote = $('#remote'); $remote.select2({ allowClear: true, minimumInputLength: 2, query: function(options){ $.ajax({ dataType: 'json', url: myURL + options.term, error: function(jqXHR, textStatus, errorThrown){ smoke.alert(textStatus + ": server returned error on parsing arguments starting with " + options.term); }, success: function(data, textStatus, jqXHR){ var results = []; for(var i = 0; i < data.length; ++i){ results.push({id: data[i].id, text: data[i].name}); } options.callback({results: results, more: false}); } }); } }); 

Sfortunatamente, la chiamata a $remove.select2('val', '') lancia la seguente eccezione:

  Uncaught Error: cannot call val() if initSelection() is not defined 

Ho provato a impostare l’ attr , impostando il val , il text e la funzione specifica dei data Select2. Non riesco a rendere il ragazzo chiaro e funziona come un pulsante di scelta. Qualcuno ha suggerimenti?

Questo funziona per me:

  $remote.select2('data', {id: null, text: null}) 

Funziona anche con jQuery quando lo si convalida in questo modo.

– modifica 2013-04-09

Al momento di scrivere questa risposta, era l’unico modo. Con le patch recenti, è ora disponibile un modo corretto e migliore.

 $remote.select2('data', null) 

In caso di Select2 Versione 4+

ha cambiato syntax ed è necessario scrivere in questo modo:

 // clear all option $('#select_with_blank_data').html('').select2({data: [{id: '', text: ''}]}); // clear and add new option $("#select_with_data").html('').select2({data: [ {id: '', text: ''}, {id: '1', text: 'Facebook'}, {id: '2', text: 'Youtube'}, {id: '3', text: 'Instagram'}, {id: '4', text: 'Pinterest'}]}); 

Questo è quello giusto, select2 cancellerà il valore selezionato e mostrerà il segnaposto.

 $remote.select2('data', null) 

Usando select2 versione 4 puoi usare questa breve notazione:

 $('#remote').html('').select2({data: {id:null, text: null}}); 

Questo passa un array json con id e testo nulli alla select2 alla creazione ma prima, con .html('') svuota i risultati memorizzati in precedenza.

Per select2 versione 4 usa facilmente questo:

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

Dopo aver popolato l’elemento select con una chiamata ajax, potresti aver bisogno di questa riga di codice nella sezione success per aggiornare il contenuto:

  success: function(data, textStatus, jqXHR){ $('#remote').change(); } 

Dovresti usare questo:

  $('#remote').val(null).trigger("change"); 

Il metodo proposto @Lelio Faieta funziona per me, ma poiché utilizzo il tema bootstrap , rimuove tutte le impostazioni di bootstrap per select2. Quindi ho usato il seguente codice:

 $("#remote option").remove(); 

Entrambi funzionano per me per cancellare il menu a discesa:

 .select2('data', null) .select2('val', null) 

Ma nota importante: il valore non viene ripristinato, .val () restituirà la prima opzione anche se non è selezionata. Sto usando Select2 3.5.3

Sono un po ‘in ritardo, ma questo è ciò che funziona nell’ultima versione (4.0.3):

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

Ho trovato la risposta (complimenti a user780178 ) che stavo cercando in questa altra domanda:

Ripristina il valore select2 e mostra placeholdler

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

Da> 4.0 per pulire veramente la select2 devi fare quanto segue:

 $remote.select2.val(''); $remote.select2.html(''); selectedValues = []; // if you have some variable where you store the values $remote.select2.trigger("change"); 

Si prega di notare che selezioniamo select2 in base alla domanda iniziale. Nel tuo caso molto probabilmente sceglierai select2 in un modo diverso.

Spero che sia d’aiuto.

Dal momento che nessuno di questi ha funzionato per me (select2 4.0.3) è stata selezionata la modalità standard.

 for(var i = selectbox.options.length - 1 ; i >= 0 ; i--) selectbox.remove(i); 

È ansible utilizzare questo o consultare ulteriormente questo https://select2.org/programmatic-control/add-select-clear-items

 $('#mySelect2').val(null).trigger('change'); 

Ecco come faccio:

 $('#my_input').select2('destroy').val('').select2();