Una de las tantas cosas que fascinan de la libreria de JQuery, es la facilidad con la que podemos accesar y/o controlar los elementos de las formas que creamos en nuestras paginas. Si usamos Javascript directamente, igual podemos crear funciones que nos permitan hacer lo mismo, pero la verdad eso si que produce flojera y llevara bastante tiempo para que resulte a la perfeccion en cierto sentido, y que sea compatible con los navegadores mayormente usados hoy en dia.
Asi que, utilizemos lo que JQuery nos ofrece ya que es una libreria de calidad y gratuita.
Definir el elemento de la forma: SELECT
Aqui nos enfocaremos al famoso SELECT. Usando como base el siguiente, realizaremos acciones basicas sobre este elemento. Notese que uso solo unas de las tantas formas que hay para hacerlo. Mi enfoque es por medio de las mas comunes en foros y sitios alrededor de la web.
<select id="MiSelect"> <option value="Uno">Uno (1)</option> <option value="Dos">Dos (2)</option> <option value="Tres">Tres (3)</option> <option value="Cuatro">Cuatro (4)</option> <option value="Cinco">Cinco (5)</option> </select>
Obtener el valor (value) de la opcion seleccionada
Leer el valor no visible que se carga en el atributo value de la opcion seleccionada, se hace por medio de la funcion val():
$('#MiSelect option:selected').val();
Obtener el texto (text) de la opcion seleccionada
Leer el valor visible de la opcion seleccionada, se hace por medio de la funcion text():
$('#MiSelect option:selected').text();
Establecer la opcion seleccionada
Muchas veces es necesario definir o pre-establecer un valor seleccionado al momento que carga el elemento, o dinamicamente durante su uso. Para ello existe una forma (de varias que hay) que permite hacerlo de forma sencilla al definir el numero ordinal de la opcion que deseamos:
//Ejemplo para establecer la opcion 3
//(La primera opcion lleva la posicion 0).
var numeroOrdinal = 2;
$('#MiSelect').get(0).selectedIndex = numeroOrdinal;
Limpiar/Eliminar las opciones existentes
Cuando trabajamos con datos dinamicos, es veces necesario recargar el elemento completo con todas sus opciones nuevas, pero para ello primero tenemos que borrarlas y luego establecerlas. El metodo remove() es el indicado para dicha tarea. Como este metodo opera en base a los resultados del seleccionador de JQuery, es necesario agregarle la funcion end() al final. Esta ultima lo que hace es iterar todas las referencias y eliminarlas hasta el final. Si en caso solo es necesario eliminar una o ciertas opciones, se omite el metodo final, y se adapta la obtencion de las referencias de acuerdo a lo que buscamos:
$('#MiSelect').find('option').remove().end();
Cargar nuevas opciones
Cuando tenemos un dropdown que queremos cargar de forma dinamica, ya sea con nuevas opciones o simplemente agregarle nuevas, es posible por medio del metodo append(). Este metodo permite anexar la opcion al elemento, y lo hace en forma secuencial. Notese que aqui la construccion de las opciones se realiza por medio de JQuery tambien:
$('#MiSelect').append($('<option></option>').attr('value', 'Uno' ).text('Uno (1)'));
$('#MiSelect').append($('<option></option>').attr('value', 'Dos' ).text('Dos (2)'));
$('#MiSelect').append($('<option></option>').attr('value', 'Tres' ).text('Tres (3)'));
$('#MiSelect').append($('<option></option>').attr('value', 'Cuatro' ).text('Cuatro (4)'));
$('#MiSelect').append($('<option></option>').attr('value', 'Cinco' ).text('Cinco (5)'));
ULTIMAS LINEAS
Estas son solo formas comunes y basicas de operar un SELECT. Mas adelante publicare la forma de hacerlo con grupos de opciones (<optgroup>). Esten al pendiente.
Actualizado: Martes 21 de Junio del 2011 – J.R.