¿Cómo eliminar todas las opciones de un cuadro de selección y luego agregar una opción y seleccionarla con jQuery?

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

¿Por qué no usar javascript simple?

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

Tuve un error en IE7 (funciona bien en IE6) donde el uso de los métodos jQuery anteriores borraría el select en el DOM pero no en la pantalla. Usando la barra de herramientas para desarrolladores de IE, pude confirmar que el select se había borrado y tenía los nuevos elementos, pero visualmente el select todavía mostraba los elementos antiguos, aunque no pudo seleccionarlos.

La solución fue usar métodos/propiedades DOM estándar (como el original del póster) para borrar en lugar de jQuery-aún usando jQuery para añadir opciones.

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

Si su objetivo es eliminar todas las opciones de la selección, excepto la primera (por lo general, la opción 'Elija un elemento'), podría usar:

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

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

No estoy seguro exactamente de lo que quiere decir con "añadir uno y seleccionarlo", ya que se seleccionará por defecto de todos modos. Pero, si agregaras más de uno, tendría más sentido. ¿Qué tal algo como:

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

Respuesta a"EDITAR" : ¿Puede aclarar lo que quiere decir con "Esta casilla de selección está poblada por un conjunto de botones de opción"? Un elemento no puede (legalmente) contener elementos .

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

Gracias a las respuestas que recibí, pude crear algo como lo siguiente, que se adapte a mis necesidades. Mi pregunta era algo ambigua. Gracias por el seguimiento. Mi problema final se resolvió mediante la inclusión de "seleccionado" en la opción que quería seleccionado.

$(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>

1. Primero borre toda la opción existente ejecute la primera (Select Select--)

2. Añadir nuevos valores de opción usando bucle uno por 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));
   }
   

¿Qué tal cambiar el html a nuevos datos?

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

Otro ejemplo:

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

Otra manera:

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

En este enlace, hay buenas prácticas https://api.jquery.com/select/

He encontrado en la red algo como a continuación. Con miles de opciones como en mi situación, esto es mucho más rápido que .empty() o .find().remove() de 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;
}

Más información aquí .

Basándose en la respuesta de mauretto, esto es un poco más fácil de leer y entender:

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

Para eliminar todas las opciones excepto una con un valor específico, puede usar esto:

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

Esto sería mejor si la opción a agregar ya estuviera allí.

Esto reemplazará su mySelect existente con una nueva mySelect.

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

Puede hacerlo simplemente reemplazando html

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

Usa jquery prop () para borrar la opción seleccionada

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

Espero que funcione

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

• guarde los valores de opción que se agregarán a un objeto
• borrar las opciones existentes en la etiqueta select
• itere el objeto list y añada el contenido a la etiqueta select deseada

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>

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

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

La primera línea de código eliminará todas las opciones de un cuadro de selección, ya que no se ha mencionado ningún criterio de búsqueda de opción.

La segunda línea de código agregará la Opción con el valor especificado("testValue") y el Texto("TestText").