jQuery – Conseguir el texto de la opción seleccionada de un desplegable

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 datepicker, php, mysql y las fechas en form... Veamos un caso particular a la hora de programar con jquery ui. El componente DatePicker nos proporciona una manera muy visual y eficiente de insertar...
jQuery Plugin Tutorial – Layout Vídeo-tutorial dónde explicamos brevemente cómo utilizar el plugin Layout para jQuery. Nos permite dividir la pantalla de una aplicación para hacerla ...
jQuery – Traducir hora española a inglesa Es muy común tener en un textbox de un formulario una fecha en español DD/MM/YYY, y queramos convertirla al formato inglés YYYY/MM/DD para poder traba...
Primer contacto con jQuery Como indican en la web oficial, jQuery es una librería para JavaScript que facilita la programación en las tareas de eventos, crear animaciones y efec...

Deja un comentario

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

*