¿Cómo cambiar las opciones de <select> con jQuery?

Question

Supongamos que hay una lista de opciones disponible, ¿cómo se actualiza el <select> con el nuevo <option> s?

Answer 1

Puede eliminar las opciones existentes utilizando el método empty, y luego añadir sus nuevas opciones:

var option = $('<option></option>').attr("value", "option value").text("Text"); 
$("#selectId").empty().append(option); 

Si tener sus nuevas opciones en un objeto puede:

var newOptions = {"Option 1": "value1", 
    "Option 2": "value2", 
    "Option 3": "value3" 
}; 

var $el = $("#selectId"); 
$el.empty(); // remove old options 
$.each(newOptions, function(key,value) { 
    $el.append($("<option></option>") 
    .attr("value", value).text(key)); 
}); 

Editar: Para la eliminación de los todas las opciones, pero la primera, puede utilizar el selector :gt, para obtener todos los option elementos con un índice mayor que cero y remove ellos:

$('#selectId option:gt(0)').remove(); // remove all options, but not the first 

Answer 2

$('#comboBx').append($("<option></option>").attr("value",key).text(value)); 

donde comboBx es su ID de cuadro combinado.

o puede agregar opciones como cadenas al innerHTML ya existente y luego asignarlas a la selección innerHTML.

Edición

Si usted necesita para mantener la primera opción y eliminar todos los demás, puede utilizar

var firstOption = $("#cmb1 option:first-child"); 
$("#cmb1").empty().append(firstOption); 

Answer 3

lancé una excelente respuesta de CMS en una rápida extensión de jQuery:

(function($, window) { 
    $.fn.replaceOptions = function(options) { 
    var self, $option; 

    this.empty(); 
    self = this; 

    $.each(options, function(index, option) { 
     $option = $("<option></option>") 
     .attr("value", option.value) 
     .text(option.text); 
     self.append($option); 
    }); 
    }; 
})(jQuery, window); 

Se espera una matriz de objetos que contienen claves de "texto" y "valor". Así que el uso es el siguiente:

var options = [ 
    {text: "one", value: 1}, 
    {text: "two", value: 2} 
]; 

$("#foo").replaceOptions(options); 

Answer 4

Por alguna extraña razón, esta parte

$el.empty(); // remove old options 

de la solución CMS que no funcionó para mí, así que en vez de que simplemente he utilizado este

el.html(' '); 

Y es un trabajo. Así que mi código de trabajo ahora se ve así:

var newOptions = { 
    "Option 1":"option-1", 
    "Option 2":"option-2" 
}; 

var $el = $('.selectClass'); 
$el.html(' '); 
$.each(newOptions, function(key, value) { 
    $el.append($("<option></option>") 
    .attr("value", value).text(key)); 
}); 

Answer 5

Si por ejemplo el código HTML contienen este código:

<select id="selectId"><option>Test1</option><option>Test2</option></select> 

Con el fin de cambiar la lista de opción dentro de su selección, se puede utilizar este código bramido. cuando su nombre seleccione nombrado , seleccione Id.

var option = $('<option></option>').attr("value", "option value").text("Text"); 
$("#selectId").html(option); 

en este ejemplo anterior cambio la antigua lista de opción por sólo una nueva opción.

Answer 6

Eliminar y agregar el elemento DOM es más lento que la modificación del existente.

Si los conjuntos de opciones tienen la misma longitud, es posible hacer algo como esto:

$('#my-select option') 
.each(function(index) { 
    $(this).text('someNewText').val('someNewValue'); 
}); 

En caso de que su nuevo conjunto de opciones tiene una longitud diferente, es posible eliminar/añadir opciones vacías que realmente necesita, utilizando alguna técnica descrito arriba.

Answer 7

Si actualizamos <select> constantemente y tenemos que guardar el valor anterior:

var newOptions = { 
    'Option 1':'value-1', 
    'Option 2':'value-2' 
}; 

var $el = $('#select'); 
var prevValue = $el.val(); 
$el.empty(); 
$.each(newOptions, function(key, value) { 
    $el.append($('<option></option>').attr('value', value).text(key)); 
    if (value === prevValue){ 
     $el.val(value); 
    } 
}); 
$el.trigger('change'); 

Answer 8

¿Esto ayuda?

$("#SelectName option[value='theValueOfOption']")[0].selected = true;