Listar opciones seleccionadas de un combo con jQuery

jQuery nos permite manejar de forma muy sencilla los formularios con un amplio conjunto de métodos. En este caso vamos a ver cómo podemos acceder a la lista de opciones seleccionadas de un combo y mostrarlas por pantalla utilizando la librería jQuery.

Crear el Combo

En primer lugar vamos a pintar el combo (esta vez va de fútbol):

<form id="myform">
  <select id="equipos" multiple="multiple">
    <option selected="selected" value="barça">Barça</option>
    <option value="real madrid">Real Madrid</option>
    <option value="atletico madrid">Atlético Madrid</option>
    <option value="valencia">Valencia CF</option>
    <option selected="selected" value="betis">Real Betis</option>
    <option value="deportivo">Deportivo de la Coruña</option>
  </select>
</form>

Si queremos que puedan existir varias opciones seleccionadas dentro del combo deberemos de utilizar el atributo multiple=“multiple” dentro del select. De igual manera, si queremos prefijar una de las opciones deberemos de utilizar el atributo selected=“selected”.

Manejar el Evento Change

Listaremos las opciones seleccionadas del combo cada vez que haya un cambio en dicho combo. Para ello vamos a manejar el método .change() de jQuery. En cada cambio ejecutaremos la función que le digamos al método .change().

$(document).ready(function(){
  $("#equipos").change(function(){
    // Código para listar opciones
  });
});

Recorrer las Opciones Seleccionadas

Y ¿qué va a hacer nuestra función? Pues recorrer el elemento select. Pero no todo el elemento select, si no aquellas opciones que estén seleccionadas. Así que vamos a utilizar un selector. El selector será:

#equipos option:selected

Es decir, del combo o select ‘equipos’ elige aquellas opciones, u option, que estén seleccionadas, es decir ‘selected’.

Ahora, de cada opción obtendremos su valor mediante el método .text()

$("#equipos option:selected").each(function() {
  texto += $(this).text() + " - ";
});

Mostrar el Resultado

Ya solo nos quedará volcar el contenido en alguna capa de nuestra página. Para ello creamos un elemento DIV al que llamaremos ‘resultado’ y al que volcaremos los datos mediante:

$("#resultado").text(texto);

Ejecutar al Cargar la Página

Solo nos queda un pequeño detalle. Y es que si hemos puesto campos seleccionados de antemano, si queremos que se ejecute nuestro método .change(), podemos simular el ejecutarlo mediante el método .trigger()

$("#equipos").trigger('change');

De esta manera tendremos la primera ejecución del .change().

Código Completo

El código entero nos quedará de la siguiente forma:

$(document).ready(function(){
  $("#equipos").change(function(){

    var texto = "Opciones Seleccionadas: ";
    $("#equipos option:selected").each(function() {
      texto += $(this).text() + " - ";
    });

    $("#resultado").text(texto);

  }).trigger('change');
});