Come rimuovete tutte le opzioni di una casella di selezione e quindi aggiungete un'opzione e selezionatela con jQuery?

Utilizzando core jQuery, come rimuovere tutte le opzioni di una casella di selezione, quindi aggiungere un'opzione e selezionarla?

La mia casella di selezione è la seguente.

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

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

$('#mySelect').find('option').remove().end()
.append('<option value="whatever">text</option>').val('whatever');

EDIT: Cercando di farlo imitare questo codice, utilizzo il seguente codice ogni volta che la pagina / modulo viene ripristinato. Questa casella di selezione è popolata da una serie di pulsanti di opzione. .focus()era più vicino, ma l'opzione non sembrava 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('<option selected value="whatever">text</option>') ;

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

$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;

$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;

perché non usare semplicemente javascript?

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

Se il tuo obiettivo è rimuovere tutte le opzioni dalla selezione tranne la prima (in genere l'opzione "Seleziona un elemento") puoi utilizzare:

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

Ho avuto un bug in IE7 (funziona bene in IE6) in cui l'utilizzo dei metodi jQuery sopra avrebbe cancellato la selezione nel DOM ma non sullo schermo. Utilizzando la IE Developer Toolbar ho potuto confermare che la selezione era stata cancellata e aveva i nuovi elementi, ma visivamente la selezione mostrava ancora i vecchi elementi, anche se non era possibile selezionarli.

La correzione consisteva nell'utilizzare metodi / proprietà DOM standard (come l'originale del poster) per cancellare anziché jQuery - usando comunque jQuery per aggiungere opzioni.

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

Non so esattamente cosa intendi per "aggiungine uno e selezionalo", poiché sarà comunque selezionato di default. Ma se dovessi aggiungere più di uno, avrebbe più senso. Che ne dici di qualcosa come:

$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();

Risposta a "MODIFICA" : puoi chiarire cosa intendi con "Questa casella di selezione è popolata da una serie di pulsanti di opzione"? Un <select>elemento non può (legalmente) contenere <input type="radio">elementi.

$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;

$("#control").html("<option selected=\"selected\">The Option...</option>");

Grazie alle risposte che ho ricevuto, sono stato in grado di creare qualcosa di simile al seguente, adatto alle mie esigenze. La mia domanda era alquanto ambigua. Grazie per il follow-up. Il mio ultimo problema è stato risolto includendo "selezionato" nell'opzione che volevo selezionato.

$(function() {
  $('#mySelect').children().remove().end().append('<option selected value="One">One option</option>') ; // 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('<option selected value="One">One option</option>') ;
        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 += '<option selected value="' + items[i] + '">' + items[i] + '</option>';
          }
          else {
            options += '<option value="' + items[i] + '">' + items[i] + '</option>';
          }
        }
        $('#mySelect').html(options);   // Populate select box with array
        break ;
    } // Switch end
  } // Bind function end
                                 ); // bind end
}); // Event listener end

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>One<input  name="myRadio" type="radio" value="1"  /></label>
<label>Two<input name="myRadio"  type="radio" value="2" /></label>
<select id="mySelect" size="9"></select>

Che ne dici di cambiare l'html in nuovi dati.

$('#mySelect').html('<option value="whatever">text</option>');

Un altro esempio:

$('#mySelect').html('
    <option value="1" selected>text1</option>
    <option value="2">text2</option>
    <option value="3" disabled>text3</option>
');

1. Per prima cosa deseleziona 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 al di sotto. Con migliaia di opzioni come nella mia situazione, questo è molto più veloce di .empty()o .find().remove()di 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 .

Un altro modo:

$('#select').empty().append($('<option>').text('---------').attr('value',''));

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

$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');

La prima riga di codice rimuoverà tutte le opzioni di una casella di selezione poiché non è stata menzionata alcuna opzione di ricerca criteri.

La seconda riga di codice aggiungerà l'Opzione con il valore specificato ("testValue") e Testo ("TestText").

Basandosi sulla risposta di mauretto, questo è un po 'più facile da leggere e comprendere:

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

Per rimuovere tutte le opzioni tranne una con un valore specifico, è possibile utilizzare questo:

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

Ciò sarebbe meglio se l'opzione da aggiungere fosse già presente.

Utilizza il prop jquery () per cancellare l'opzione selezionata

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

Questo sostituirà il tuo mySelect esistente con un nuovo mySelect.

$('#mySelect').replaceWith('<Select id="mySelect" size="9">
   <option value="whatever" selected="selected" >text</option>
   </Select>');

Puoi farlo semplicemente sostituendo html

$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');

Solo una riga per rimuovere tutte le opzioni dal tag select e dopo aver aggiunto tutte le opzioni, fai una seconda riga per aggiungere opzioni.

$('.ddlsl').empty();

$('.ddlsl').append(new Option('Select all', 'all'));

• salva i valori delle opzioni da aggiungere in un oggetto
• cancella le opzioni esistenti nel tag select
• iterare l'oggetto elenco e aggiungere i contenuti al tag di selezione previsto

var listToAppend = {'':'Select Vehicle','mc': 'Motor Cyle', 'tr': 'Tricycle'};

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

$.each(listToAppend, function(val, text) {
    $('#selectID').append( new Option(text,val) );
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Ho visto questo codice in Select2 - Azzeramento delle selezioni

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

Questo codice funziona bene con jQuery anche senza Select2

Spero che funzioni

$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));

var select = $('#mySelect');
select.find('option').remove().end()
.append($('<option/>').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 = $('<option/>').val(d.id).text(d.title);
    select.append(option);
}
select.val('');