javascript - ¿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?


Usando core jQuery, ¿cómo eliminas todas las opciones de un cuadro de selección, luego agregas una opción y la seleccionas?

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: Tratando de hacer que imite este código, uso el siguiente código cada vez que se restablece la página / formulario. Esta casilla de selección está poblada por un conjunto de botones de opción. .focus() estaba más cerca, pero la opción no parecía seleccionada como lo hace con .selected= "true" . No hay problema con mi código existente. Solo estoy tratando de 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 estaba cerca de 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 ...



Answers


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



$('#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á la selección en el DOM pero no en la pantalla. Utilizando la barra de herramientas de IE Developer pude confirmar que la selección se ha borrado y tenía los nuevos elementos, pero visualmente el select aún mostraba los elementos anteriores, aunque no se podían seleccionar.

La solución consistía en utilizar métodos / propiedades de DOM estándar (como el original del póster) para borrar en lugar de jQuery, aún 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 opción (por lo general, la opción 'Seleccione un elemento'), puede usar:

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



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

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

Respuesta a "EDITAR" : ¿Puedes aclarar a qué te refieres con "Esta casilla de selección está poblada por un conjunto de botones de opción"? Un elemento <select> no puede contener (legalmente) elementos <input type = "radio">.




$('#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 fue algo ambigua. Gracias por darme seguimiento. Mi problema final se resolvió al incluir "seleccionado" en la opción que quería seleccionada.

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




¿Qué tal si simplemente cambias 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>
');



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, 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, puede usar esto:

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

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




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



  1. Primero borre todas las opciones existentes, execpt la primera (- Seleccione--)

  2. Añada nuevos valores de opción utilizando 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));
    }



Utiliza el 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'));



De otra manera:

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

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