Etiqueta: select

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():