Cómo cambiar las opciones de < seleccione > con jQuery?
-
05-07-2019 - |
Pregunta
Supongamos que hay una lista de opciones disponible, ¿cómo actualizar el < select >
con la nueva < option >
s?
Solución
Puede eliminar las opciones existentes utilizando el método vacío
, y luego agregue sus nuevas opciones:
var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").empty().append(option);
Si tiene 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 eliminar todas las opciones, excepto la primera, puede usar : gt
selector, para obtener todos los elementos option
con índice mayor que cero y eliminar
ellos:
$('#selectId option:gt(0)').remove(); // remove all options, but not the first
Otros consejos
Lancé la excelente respuesta de CMS en una extensión rápida 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);
Espera una matriz de objetos que contienen " text " y "valor" llaves. Entonces el uso es el siguiente:
var options = [
{text: "one", value: 1},
{text: "two", value: 2}
];
$("#foo").replaceOptions(options);
$('#comboBx').append($("<option></option>").attr("value",key).text(value));
donde comboBx es tu ID de cuadro de combo.
o puede agregar opciones como una cadena al innerHTML ya existente y luego asignarlo al innerHTML seleccionado.
Editar
Si necesita mantener la primera opción y eliminar todas las demás, puede usar
var firstOption = $("#cmb1 option:first-child");
$("#cmb1").empty().append(firstOption);
Por alguna extraña razón esta parte
$el.empty(); // remove old options
de la solución CMS no me funcionó, así que en lugar de eso simplemente he usado esto
el.html(' ');
Y funciona. 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));
});
Eliminar y agregar elementos DOM es más lento que modificar uno existente.
Si sus conjuntos de opciones tienen la misma longitud, puede hacer algo como esto:
$('#my-select option')
.each(function(index) {
$(this).text('someNewText').val('someNewValue');
});
En caso de que su nuevo conjunto de opciones tenga una longitud diferente, puede eliminar / agregar opciones vacías que realmente necesite, utilizando alguna técnica descrita anteriormente.
Si, por ejemplo, su código html contiene este código:
<select id="selectId"><option>Test1</option><option>Test2</option></select>
Para cambiar la lista de opciones dentro de su selección, puede usar este código a continuación. cuando su nombre seleccione llamado selectId .
var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").html(option);
en este ejemplo anterior, cambio la lista anterior de opción por solo una nueva opción.
La vieja escuela de hacer las cosas a mano siempre ha sido buena para mí.
-
Limpie la selección y deje la primera opción:
$('#your_select_id').find('option').remove() .end().append('<option value="0">Selec...</option>') .val('whatever');
-
Si sus datos provienen de un Json o lo que sea (solo Concat los datos):
var JSONObject = JSON.parse(data); newOptionsSelect = ''; for (var key in JSONObject) { if (JSONObject.hasOwnProperty(key)) { var newOptionsSelect = newOptionsSelect + '<option value="'+JSONObject[key]["value"]+'">'+JSONObject[key]["text"]+'</option>'; } } $('#your_select_id').append( newOptionsSelect );
-
Mi Objeto Json:
[{"value":1,"text":"Text 1"},{"value":2,"text":"Text 2"},{"value":3,"text":"Text 3"}]
Esta solución es ideal para trabajar con Ajax y responde en Json desde una base de datos.
si actualizamos < select >
constantemente y necesitamos 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');
¿Ayuda esto?
$("#SelectName option[value='theValueOfOption']")[0].selected = true;