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?




10 Answers

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

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.




Tuve un error en IE7 (funciona bien en IE6) donde el uso de los métodos jQuery anteriores borraría la selección en el DOM pero no en la pantalla. Usando la Barra de herramientas del desarrollador de IE, pude confirmar que la selección se había borrado y tenía los nuevos elementos, pero visualmente la selección aún mostraba los elementos antiguos, aunque no se podían seleccionar.

La solución fue utilizar los métodos / propiedades estándar de DOM (como tenía el original del póster) para borrar en lugar de jQuery, aún usando jQuery para agregar opciones.

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



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



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



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



De otra manera:

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

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




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í.




Usted puede hacer simplemente mediante la sustitución de 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'));



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



Related