jQuery – Seleccionar opción de Select por el texto

Publicada el por

Ya vimos en artículos anteriores cómo seleccionar una opción de un desplegable (select) por su valor. En este artículo vamos a ver cómo seleccionarlo según el texto de la opción. Empecemos con el artículo jQuery – Seleccionar opción de Select por el texto.

Para empezar, partimos por un desplegable con algunas provincias españolas:

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

En un artículo anterior aprendimos que podíamos seleccionar una de las opciones a partir de su valor con el siguiente código:

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

Pero también podemos seleccionar la opción según el texto que contenga (Tarragona, Albacete…). Cómo? Pues con el siguiente código:

$("#provincia option:contains(Tarragona)").attr('selected', true);

De este modo, seleccionamos la opción Tarragona. Como podéis ver, no lo seleccionamos por el valor, si no por el texto que tiene esa opción. Tarragona es el texto, y su valor es 1.

Para intentar que veáis el código en acción, aprovecharemos las ventajas que nos da CodePen. Aquí tenéis el código en acción:

See the Pen jQuery – Seleccionar opción desplegable Select by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.

Espero que os haya sido de utilidad el artículo jQuery – Seleccionar opción de Select por el texto. En los siguientes enlaces veréis un que muestra cómo seleccionar una opción del desplegable por su valor con jQuery.

Más información