¿Cómo agrego opciones a un DropDownList usando jQuery?
Como dice la pregunta, ¿cómo agrego una nueva opción a DropDownList usando jQuery?
Gracias
Sin utilizar ningún complemento adicional,
var myOptions = {
val1 : 'text1',
val2 : 'text2'
};
var mySelect = $('#mySelect');
$.each(myOptions, function(val, text) {
mySelect.append(
$('<option></option>').val(val).html(text)
);
});
Si tenía muchas opciones, o este código necesitaba ejecutarse con mucha frecuencia, entonces debería considerar usar un DocumentFragment en lugar de modificar el DOM muchas veces innecesariamente. Aunque solo tengo un puñado de opciones, diría que no vale la pena.
------------------------------- Agregado ------------------ --------------
DocumentFragmentEs una buena opción para mejorar la velocidad, pero no podemos crear un elemento de opción document.createElement('option')ya que IE6 e IE7 no lo admiten.
Lo que podemos hacer es crear un nuevo elemento de selección y luego agregar todas las opciones. Una vez finalizado el ciclo, agréguelo al objeto DOM real.
var myOptions = {
val1 : 'text1',
val2 : 'text2'
};
var _select = $('<select>');
$.each(myOptions, function(val, text) {
_select.append(
$('<option></option>').val(val).html(text)
);
});
$('#mySelect').append(_select.html());
¡De esta manera modificaremos DOM solo una vez!
Sin complementos, esto puede ser más fácil sin usar tanto jQuery, en lugar de hacerlo un poco más a la vieja escuela:
var myOptions = {
val1 : 'text1',
val2 : 'text2'
};
$.each(myOptions, function(val, text) {
$('#mySelect').append( new Option(text,val) );
});
Si desea especificar si la opción a) es el valor seleccionado predeterminado y b) debe seleccionarse ahora, puede pasar dos parámetros más:
var defaultSelected = false;
var nowSelected = true;
$('#mySelect').append( new Option(text,val,defaultSelected,nowSelected) );
Con el complemento: jQuery Selection Box . Puedes hacerlo:
var myOptions = {
"Value 1" : "Text 1",
"Value 2" : "Text 2",
"Value 3" : "Text 3"
}
$("#myselect2").addOption(myOptions, false);
Es posible que desees borrar tu menú desplegable primero $('#DropDownQuality').empty();
Hice que mi controlador en MVC devolviera una lista de selección con un solo elemento.
$('#DropDownQuality').append(
$('<option></option>').val(data[0].Value).html(data[0].Text));
