Come rimuovi tutte le opzioni di una casella di selezione e poi aggiungi un’opzione e la selezioni con jQuery?

Usando il core jQuery, come rimuovi tutte le opzioni di una casella di selezione, quindi aggiungi un’opzione e la selezioni?

La mia casella di selezione è la seguente.

<Select id="mySelect" size="9"  

EDIT: il seguente codice è stato utile con il concatenamento. Tuttavia, (in Internet Explorer) .val('whatever') non ha selezionato l’opzione che è stata aggiunta. (Ho usato lo stesso ‘valore’ in entrambi .append e .val .)

 $('#mySelect').find('option').remove().end().append('text').val('whatever'); 

EDIT: cercando di farlo imitare questo codice, io uso il seguente codice ogni volta che la pagina / form viene ripristinata. Questa casella di selezione è popolata da un set di pulsanti di opzione. .focus() era più vicino, ma l’opzione non appariva selezionata come fa con .selected= "true" . Non c’è niente di sbagliato nel mio codice esistente – sto solo cercando di imparare jQuery.

 var mySelect = document.getElementById('mySelect'); mySelect.options.length = 0; mySelect.options[0] = new Option ("Foo (only choice)", "Foo"); mySelect.options[0].selected="true"; 

EDIT: la risposta selezionata era vicina a ciò di cui avevo bisogno. Questo ha funzionato per me:

     $('#mySelect').children().remove().end().append('text') ; 

    Ma entrambe le risposte mi hanno portato alla mia soluzione finale ..

     $('#mySelect') .find('option') .remove() .end() .append('') .val('whatever') ; 
     $('#mySelect') .empty() .append('') ; 

    perché non usare semplicemente javascript?

     document.getElementById("selectID").options.length = 0; 

    Ho avuto un bug in IE7 (funziona bene in IE6) dove usare i metodi jQuery sopra cancellerebbe la selezione nel DOM ma non sullo schermo. Usando la barra degli sviluppatori di IE potrei confermare che la selezione era stata cancellata e aveva i nuovi elementi, ma visivamente la selezione mostrava ancora i vecchi elementi – anche se non si potevano selezionare.

    La correzione consisteva nell’usare metodi DOM standard / proprietà (come era l’originale del poster) per cancellare piuttosto che jQuery – usando ancora jQuery per aggiungere opzioni.

     $('#mySelect')[0].options.length = 0; 

    Se il tuo objective è rimuovere tutte le opzioni dalla selezione tranne la prima (in genere l’opzione “Scegli un object”) puoi utilizzare:

     $('#mySelect').find('option:not(:first)').remove(); 
     $('#mySelect') .empty() .append('') .find('option:first') .attr("selected","selected") ; 

    Non sei sicuro di cosa intendi per “aggiungerne uno e selezionarlo”, poiché sarà comunque selezionato di default. Ma se ne aggiungessi più di uno, avrebbe più senso. Che ne dici di qualcosa come:

     $('select').children().remove(); $('select').append(''); $('#foo').focus(); 

    Risposta a “MODIFICA” : puoi chiarire cosa intendi per “Questa casella di selezione è popolata da un set di pulsanti di opzione”? Un elemento .

     $("#control").html(""); 

    Grazie alle risposte che ho ricevuto, sono stato in grado di creare qualcosa come il seguente, che si adatta alle mie esigenze. La mia domanda era alquanto ambigua. Grazie per il seguito. Il mio ultimo problema è stato risolto includendo “selezionato” nell’opzione che volevo selezionare.

     $(function() { $('#mySelect').children().remove().end().append('') ; // clear the select box, then add one option which is selected $("input[name='myRadio']").filter( "[value='1']" ).attr( "checked", "checked" ); // select radio button with value 1 // Bind click event to each radio button. $("input[name='myRadio']").bind("click", function() { switch(this.value) { case "1": $('#mySelect').find('option').remove().end().append('') ; break ; case "2": $('#mySelect').find('option').remove() ; var items = ["Item1", "Item2", "Item3"] ; // Set locally for demo var options = '' ; for (var i = 0; i < items.length; i++) { if (i==0) { options += ''; } else { options += ''; } } $('#mySelect').html(options); // Populate select box with array break ; } // Switch end } // Bind function end ); // bind end }); // Event listener end 
         

    Che ne dici di cambiare semplicemente l’html con i nuovi dati.

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

    Un altro esempio:

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

    Un altro modo:

     $('#select').empty().append($(' 

    Sotto questo link, ci sono buone pratiche https://api.jquery.com/select/

    1. Prima deselezionare tutte le opzioni esistenti esegui la prima (- Seleziona–)

    2. Aggiungi nuovi valori di opzione usando il ciclo uno per uno

       $('#ddlCustomer').find('option:not(:first)').remove(); for (var i = 0; i < oResult.length; i++) { $("#ddlCustomer").append(new Option(oResult[i].CustomerName, oResult[i].CustomerID + '/' + oResult[i].ID)); } 

    Ho trovato in rete qualcosa di simile in basso. Con migliaia di opzioni come nella mia situazione, questo è molto più veloce di .empty() o .find().remove() da jQuery.

     var ClearOptionsFast = function(id) { var selectObj = document.getElementById(id); var selectParentNode = selectObj.parentNode; var newSelectObj = selectObj.cloneNode(false); // Make a shallow copy selectParentNode.replaceChild(newSelectObj, selectObj); return newSelectObj; } 

    Maggiori informazioni qui .

    Basandosi sulla risposta di Mauretto, questo è un po ‘più facile da leggere e capire:

     $('#mySelect').find('option').not(':first').remove(); 

    Per rimuovere tutte le opzioni tranne una con un valore specifico, puoi usare questo:

     $('#mySelect').find('option').not('[value=123]').remove(); 

    Questo sarebbe meglio se l’opzione da aggiungere fosse già lì.

    Questo sostituirà mySelect esistente con un nuovo mySelect.

     $('#mySelect').replaceWith(''); 

    Puoi fare semplicemente sostituendo html

     $('#mySelect') .html('') .trigger('change'); 

    Usa jquery prop () per cancellare l’opzione selezionata

     $('#mySelect option:selected').prop('selected', false); 

    Spero che funzionerà

     $('#myselect').find('option').remove() .append($('').val('value1').html('option1')); 
     var select = $('#mySelect'); select.find('option').remove().end() .append($('').val('').text('Select')); var data = [{"id":1,"title":"Option one"}, {"id":2,"title":"Option two"}]; for(var i in data) { var d = data[i]; var option = $('').val(d.id).text(d.title); select.append(option); } select.val(''); 
    • salva i valori delle opzioni da aggiungere in un object
    • deselezionare le opzioni esistenti nel tag select
    • itera l’object elenco e aggiungi il contenuto al tag di selezione desiderato
     var listToAppend = {'':'Select Vehicle','mc': 'Motor Cyle', 'tr': 'Tricycle'}; $('#selectID').empty(); $.each(listToAppend, function(val, text) { $('#selectID').append( new Option(text,val) ); });