¿Cómo se eliminan todas las opciones de un cuadro de selección y luego se agrega una opción y se selecciona con jQuery?

https://stackoverflow.com/questions/47824

09-06-2019
|

Pregunta

Usando jQuery principal, ¿cómo se eliminan todas las opciones de un cuadro de selección, luego se agrega una opción y se selecciona?

Mi cuadro de selección es el siguiente.

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

EDITAR:El siguiente código fue útil con el encadenamiento.Sin embargo, (en Internet Explorer) .val('whatever') no seleccionó la opción que se agregó.(Utilicé el mismo 'valor' en ambos .append y .val.)

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

EDITAR:Al intentar que imite este código, utilizo el siguiente código cada vez que se restablece la página/formulario.Este cuadro de selección está poblado por un conjunto de botones de opción. .focus() estaba más cerca, pero la opción no aparecía seleccionada como ocurre con .selected= "true".No hay ningún problema con mi código existente; solo estoy intentando aprender jQuery.

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

EDITAR:La respuesta seleccionada se acercaba a lo que necesitaba.Esto funcionó para mí:

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

Pero ambas respuestas me llevaron a mi solución final.

Solución

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

Otros consejos

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

¿Por qué no utilizar 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 seleccionar en el DOM pero no en la pantalla.Usando la barra de herramientas para desarrolladores de IE pude confirmar que el seleccionar había sido limpiado y tenía los nuevos elementos, pero visualmente el seleccionar Todavía mostraba los elementos antiguos, aunque no podía seleccionarlos.

La solución fue usar métodos/propiedades DOM estándar (como lo tenía el cartel original) para borrar en lugar de jQuery; seguir usando jQuery para agregar opciones.

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

Si su objetivo es eliminar todas las opciones de la selección excepto la primera (normalmente la opción "Elija un elemento"), puede usar:

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

No estoy seguro de qué quieres decir exactamente con "agregar uno y seleccionarlo", ya que de todos modos se seleccionará de forma predeterminada.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 "Este cuadro de selección está poblado por un conjunto de botones de opción"?A <select> El elemento no puede (legalmente) contener. <input type="radio"> elementos.

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

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

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

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

Primero borre todas las opciones existentes excepto la primera (--Seleccionar--)

Agregue nuevos valores de opción usando el 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 simplemente 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>
');

De otra manera:

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

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

Encontré en la red algo como lo siguiente.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 comprender:

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

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

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

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

$("#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 opciones.

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

Utiliza el jquery apuntalar() para borrar la opción seleccionada

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

Esto reemplazará su mySelect existente con un nuevo mySelect.

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

Puedes hacerlo simplemente reemplazando html.

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

Espero que funcione

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

guarde los valores de opción que se agregarán en un objeto
borrar las opciones existentes en la etiqueta de selección
iterar el objeto de lista y agregar el contenido a la etiqueta de selección 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>

Vi este código en select2https://select2.org/programmatic-control/add-select-clear-items#clearing-selections

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

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

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow