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




option each (18)

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

Con core jQuery, ¿cómo elimina todas las opciones de un cuadro de selección, luego agrega una opción y la 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' tanto en .append como en .val .)

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

EDITAR: Intentando que imite este código, uso el siguiente código cada vez que se restablece la página / formulario. Este cuadro de selección se llena con un conjunto de botones de opción. .focus() estaba más cerca, pero la opción no apareció seleccionada como lo hace con .selected= "true" . No hay nada malo 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.


Sobre la base de 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 para agregarse ya estuviera allí.


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

No está seguro de qué quiere decir exactamente con "agregue uno y selecciónelo", ya que se seleccionará de forma predeterminada de todos modos. Pero, si tuviera que agregar 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 qué quiere decir con "Este cuadro de selección se llena con un conjunto de botones de opción"? Un elemento <select> no puede (legalmente) contener elementos <input type = "radio">.


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 el seguimiento. Mi problema final se resolvió al incluir "seleccionado" en la opción que quería que se seleccionara.

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

Esto reemplazará su mySelect existente con un nuevo mySelect.

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

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

De otra manera:

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

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


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

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

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

Si su objetivo es eliminar todas las opciones de la selección excepto la primera (por lo general, la opción 'Por favor elija un artículo'), puede usar:

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

  • Guarda los valores de opción para ser anexados en un objeto.
  • Borrar las opciones existentes en la etiqueta de selección
  • itere el objeto de la lista y agregue 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>


Espero que funcione

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

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

  2. Agregue nuevos valores de opciones 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));
    }
    

He encontrado en la red algo como abajo. 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 here .


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

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
    alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<img id="book" src="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />

Fuente:

Blogger Plug n Play - Herramientas y widgets de jQuery: cómo ver si el elemento está oculto o visible usando jQuery

jsFiddle:

JSFiddle - ipsjolly - k4WWj





javascript jquery option html-select