Manejo de listas select con jQuery (ComboBox/DropDownList)

jQuery es un framework cuyo uso se hace casi inevitable para todos aquellos que usamos de forma intensiva JavaScript. El manejo de las listas de elementos en un sitio web, con la etiqueta <select>, es algo básico en el manejo de datos presentados en formularios.

De cara a validar, gestionar, editar, insertar… es decir, hacer todo tipo de operaciones con los datos en el cliente, necesitamos de JavaScript pero su uso es tedioso. jQuery lo hace simple e inmediato. Veamos el caso concreto del manejo del <select>.

Veamos, tenemos el siguiente listado en un sitio, vemos el código directamente en HTML:

<select id="miselect">
 <option value="1">Ubuntu</option>
 <option value="2">Fedora</option>
 <option value="3">Red Hat</option>
 <option value="4">Debian</option>
</select>

Para cada elemento tenemos dos datos:

• El texto que se muestra: suele ser algo visible para el humano, un nombre de distribución en este caso
• El valor: suele ser un identificador único, en este caso es una referencia ficticia a una tabla de distribuciones

Comencemos a tratarlo.

Seleccionar el elemento

La sintaxis de los selectores de jQuery está basada en la de CSS. En este caso elegir el <select> dentro del DOM del documento sería como sigue:

$("#miselect")

Obtener el valor del ítem seleccionado

Sobre el selector aplicamos la función val():

var mivalor = $("#miselect").val()

Obtener el texto del ítem seleccionado

Análogo al anterior, pero no podemos directamente usar la función text(). En caso de usarla directamente tendríamos una cadena con todos los textos que aparecen en el <select>. Para asegurarnos que tenemos sólo el texto del elemento seleccionado incluimos en el selector “option:selected”.

var mitexto = $("#miselect option:selected").text()

Controlar el cambio de valor elegido

También es importante controlar cuándo cambia el valor elegido. Para manejar este evento usamos el siguiente código:

$("#miselect").change(function() {
 alert("Han cambiado mi valor"); 
});

Elegir un valor desde el código

En este caso usaremos la función val() pero en lugar de usarla sin parámetros, le pasaremos un entero, con esta sobrecarga se comporta tal como queremos. Elegimos el segundo valor para nuestro ejemplo:

$("#miselect").val(2)

Añadir más valores en el cliente

Usamos la función appendTo():

$("<option value='5'>Scientific Linux</option>").appendTo("#miselect");

Modificar el contenido interno en el cliente

Si queremos un cambio más radical, porque hayamos recibido una información de una petición AJAX tenemos la función html():

$("#miselect").html(nuevosDatos);

Como veis todas estas operaciones son muy simples cuando usamos jQuery, ¿alguien quiere apuntar vía comentario cómo serían las mismas operaciones usando JavaScript directamente?