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.

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

  
    Barça
    Real Madrid
    Atlético Madrid
    Valencia CF
    Real Betis
    Deportivo de la Coruña
  

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

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

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

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

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

Publicaciones relacionadas:

Cambios en un combo con jQuery Acceder a un campo de formulario con jQuery Seleccionar el texto de un campo Seleccionar texto al posicionarse en un campo Seleccionar un texto solo si no ha cambiado