jquery tutorial

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.

Por un lado tenemos un desplegable con varias poblaciones:

1
2
3
4
5
6
<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:

1
<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.

1
2
3
4
5
6
<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.

Artículos relacionados

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 – Seleccionar opción de un desplegabl... Si buscáis por internet cómo seleccionar valores de un desplegable con jQuery os saldran multitud de ejemplos en los que todo el mundod ice que les fu...
jQuery 2.0 no da soporte a Internet Explorer 6,7 y... Las últimas noticias indican que la nueva versión de jQuery, no dará soporte a Internet Explorer 6,7 y 8. Un duro golpe a Microsoft, y a los usuarios ...
Validar un formulario con jQuery antes de enviarlo Una de las funciones que le dan un perfil mas profesional a nuestra web, es la validación de los formularios, antes de enviarlos. Una opción es enviar...