2.8 Obteniendo el valor de una lista desplegable con attr().

Para obtener el valor del elemento seleccionado dentro de una lista desplegable, podemos utilizar el método de Jquery attr(). Para entender un poco mejor el funcionamiento de este método supongamos que tenemos una lista desplegable que contiene una lista de países y queremos que al seleccionar uno de los países nos aparezca un mensaje que contenga el país seleccionado, el HTML necesario sería el siguiente:

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

Ahora el código Jquery necesario para realizar dicho efecto, sería el siguiente:

$(document).ready(function(){
        $(“.pais”).change(function(){
             //guardando valor seleccionado en una variable
                  var pais=$(“.pais”).attr(“value”);
               alert (pais);
     });
});

El código Jquery consiste de  los siguientes elementos:

• La primera parte $(document).ready(function(){}); sirve para indicar que el código javascript se ejecutará una vez que el HTML se haya cargado por completo.
• La segunda parte $(“.pais”).change(function(){}); sirve para indicar lo que sucederá una vez que se haya seleccionado un elemento de la lista, esto a través del método change().
• La tercera parte var pais=$(“.pais”).attr(“value”);  sirve para obtener el valor seleccionado de la lista desplegable, como se puede ver se ha utilizado el método attr(), que se utiliza para obtener el valor de algún atributo de un elemento HTML, en este caso el atributo es value, ya que dicho atributo almacena el valor seleccionado de la lista.
• La última parte, alert (pais); sencillamente genera una ventana emergente que contiene el valor de la variable país, o sea, el país seleccionado.