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 el artículo jQuery como seleccionar una opción de Select para vuestro código.


Más información