2.7 Seleccionando un elemento de una lista desplegable con change()

El método change() de Jquery nos permite detectar cuando se ha seleccionado una opción de una lista desplegable. Por ejemplo todos hemos visto al momento de rellenar un formulario de registro, seleccionamos nuestro país de una lista e inmediatamente después se cargan los estados o provincias correspondientes, bueno es ese caso, se ha detectado la selección de un país gracias al evento change().Para ilustrar un poco mejor el funcionamiento del evento change(), supongamos que tenemos una lista desplegable y que deseamos que al seleccionar un país nos aparezca una ventana emergente con el mensaje “Has seleccionado un país”, tendríamos el siguiente código HTML:

<select  size=”1” class=”pais”>
<option value=”Mexico”>Mexico</option>
<option value=”Argentina”>Argentina</option>
<option value=”Bolivia”>Bolivia</option>
</select>

y el código Jquery necesario para realizer ese efecto sería como sigue:

$(document).ready(function(){
       $(“.pais”).change(function(){
                alert(“Has seleccionado un país”);
       });
});

El código consiste de los siguientes elementos:

• La primera partes $(document).ready(function(){}); sirve para indicar que el código javascript se ejecutará hasta que se haya cargado por completo el código HTML.
• La segunda parte $(“.pais”).change(function(){}); sirve para seleccionar la lista desplegable e indicar lo que sucederá una vez que se seleccione un elemento de la lista.
• La última parte alert(“Has seleccionado un país”); muestra una ventana emergente con el mensaje.