Conseguir texto de opción seleccionada de un desplegable en jQuery
En un desplegable, nos puede interesar saber el texto que se muestra de la opción seleccionada. Lo veremos mucho mejor con un ejemplo que puede aclarar este concepto. Empecemos con Conseguir texto de opción seleccionada de un desplegable en jQuery.
Empecemos el ejemplo con el código HTML5 necesario. Por un lado tenemos un desplegable con las posibles poblaciones que el usuario puede seleccionar:
<select id="poblaciones" name="poblaciones"> <option value="1">Altafulla</option> <option value="2">Creixell</option> <option value="3">La Riera</option> <option value="4">Torredembarra</option> </select>
Por otro lado, tenemos un campo hidden donde almacenaremos el texto de la opción seleccionada. Mientras el select tendrá el valor ‘3’. el campo hidden tendrá el valor ‘La Riera’. De este modo podemos tener los dos valores en un formulario:
<input id="poblacionseleccionada" name="poblacionseleccionada" type="hidden" value="" />
Con el siguiente texto, haremos que una vez se seleccione una opción del desplegable, el campo ‘poblacionseleccionada’ tome el valor del texto (y no del valor) de la opción seleccionada. Eso es, si seleccionamos Altafulla, el campo hidden tomarà el valor Altafulla y no 1.
<script type="text/javascript">
$("#poblaciones").change(function() {
tmp = $("#poblaciones option:selected").text();
$('#poblacionseleccionada').val(tmp);
});
</script>
Está claro que el código puede optimizarse y hacerse de mil maneras, pero lo ponemos de una forma que pueda ser claro para que se entienda de la forma mas sencilla posible.
Esperamos que os sea de utilidad el artículo Conseguir texto de opción seleccionada de un desplegable en jQuery.
Más información