Vamos a ver cómo obtener el valor de un select con jQuery. Este campo desplegable es muy usado y muchas veces se necesita comprobar su valor antes de validar el formulario.
Otros post con temática similar son:
En el post de change() ya hice un sencillo ejemplo para obtener el valor usando jQuery.
En este ejemplo de jQuery change() podéis ver la obtención de valor.
$(document).ready(function(){ $("select[name=color1]").change(function(){ alert($('select[name=color1]').val()); $('input[name=valor1]').val($(this).val()); }); $("#ejemplo2").change(function(){ alert($('select[id=ejemplo2]').val()); $('#valor2').val($(this).val()); }); $(".ejemplo3").change(function(){ alert($('select[class=ejemplo3]').val()); $('.valor3').val($(this).val()); }); });
En este ejemplo he puesto 3 formularios con campos select y un input text, la diferencia entre los 3 radica en cómo voy a realizar la comprobación y asignación del cambio de valor de cada formulario:
Como habéis podido ver los 3 formularios son bien sencillos, os pongo su código HTML:
Formulario 1 <form name="ejemplo1" action="17-jquery-change-demo1.php" method="POST"> <select name="color1"> <option value="0">Selecciona una opción</option> <option value="azul">Azul</option> <option value="rojo">Rojo</option> </select> <input type="text" name="valor1" size="40" value="Aquí saldrá el valor del select cuando cambie"> </form> Formulario 2 <form name="ejemplo2" action="17-jquery-change-demo1.php" method="POST"> <select name="color2" id="ejemplo2"> <option value="0">Selecciona una opción</option> <option value="azul">Azul</option> <option value="rojo">Rojo</option> </select> <input type="text" name="valor2" size="40" id="valor2" value="Aquí saldrá el valor del select cuando cambie"> </form> Formulario 3 <form name="ejemplo3" action="17-jquery-change-demo1.php" method="POST"> <select name="color3" class="ejemplo3"> <option value="0">Selecciona una opción</option> <option value="azul">Azul</option> <option value="rojo">Rojo</option> </select> <input type="text" name="valor3" size="40" class="valor3" value="Aquí saldrá el valor del select cuando cambie"> </form>
Otra opción es usar el método jQuery click(), pero resultaría incómodo para el usuario y casi imposible validar el formulario, ya que el primer click en el select siempre sería para desplegar los diferentes valores del select.
Para la detección, control o selección de elementos con jQuery os recomiendo leer este post: