jQuery como seleccionar una opción de Select

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.

Información relacionada

15 comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*