Obtener el valor de un select (option) con jQuery

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.

Ejemplo para obtener el valor de un select con jQuery change

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());
	});
});

$(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:

Comprobación/asignación de valor por atributo name. En el primer formulario detecto el cambio de valor de un campo select con nombre ‘color1′, saco su valor con un alert y los asigno a un input text con jQuery val().
Comprobación/asignación de valor por atributo id. En segundo formulario detecto que el elemento con id ‘ejemplo2′ cambia de valor, a continuación saco su valor con un alert y lo asigno a un input text con jQuery val().
Comprobación/asignación de valor por atributo class. En tercer formulario detecto como el elemento con class ‘ejemplo3′ ha cambiado de valor, saco su valor con un alert y lo asigno al input text con jQuery val().

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>

Formulario 1

<option value="0">Selecciona una opción</option>

</select>

</form>

Formulario 2

<option value="0">Selecciona una opción</option>

</select>

</form>

Formulario 3

<option value="0">Selecciona una opción</option>

</select>

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