jquery tutorial

Código muy práctico para utilizarlo una vez recibimos datos vía AJAX y debemos seleccionar una de las opciones. En jQuery puedes seleccionar una opción de un Select según su valor:

Tenemos el siguiente select de provincias:

 

<select id=”provincias”>
<option value=”1″>Tarragona</option>
<option value=”2″>Albacete</option>
<option value=”3″>Castellón</option>
<option value=”4″>Almería</option>
</select>

 

Veamos la sentencia para seleccionar una opción según su valor:

$("#provincia option[value="+ valor +"]").attr("selected",true);

Con este código según ‘valor’ se seleccionará por defecto una opción u otra. Si valor es 1, se seleccionará Tarragona, por ejemplo.

Ahora veremos dos ejemplos. Uno con valores numéricos y otro con valores de texto. El de texto también con espacios. Veámos el ćodigo en acción:

See the Pen Jquery – Seleccionar option de select por valor by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.

Si os fijáis en el ejemplo de valores numéricos, lo hacemos con:

$("#provincia option[value=2").attr("selected",true);

Pero en el de texto, hay una diferencia que hace que podamos poner valores separados por espacios. Las comillas (fijaos que La Rioja está entre comillas:

$("#provincia option[value='La Rioja'").attr("selected",true);

Por lo tanto quedaría algo así si queremos hacerlo genérico y no con un valor determinado:

$("#provincia option[value='"+ valor +"']").attr("selected",true);

Así pues, cuando recibimos los datos por AJAX y según el valor, debemos seleccionar una opción u otra, lo haremos con éste código.

Espero que os sea de utilidad.

Artículos relacionados

FancyBox – Llamarlo desde una función Muchos de vosotros conoceréis FancyBox, una alternativa para Ligtht Box. Nos permite abrir ventanas modales mostrando mensajes o imágenes. Las maneras...
jQuery UI – Tutorial 1 – Introducción Breve tutorial que nos muestra que es la librería jQuery UI y un pequeño ejemplo de lo que puede hacer. jQuery User Interface nos facilitará la creaci...
jQuery – Evitar envío formulario con tecla E... Sequimos con ejemplos de jQuery. En este caso cómo evitar el envío de formulario con la tecla Enter. Como ya vimos en otros artículos, la forma de tr...
jQuery UI – Tutorial 2 – Puesta en mar... Tutorial que muestra cómo poner en marcha la librería jQuery UI. Qué debo descargar, los termas predeterminados de jQuery UI, colocar la librería en n...