Listar opciones seleccionadas de un combo con jQuery

24/Sep/2011 jQuery , 2 Comentarios

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

  1. <form id="myform">
  2. <select id="equipos" multiple="multiple">
  3. <option value="barça" selected="selected">Barça</option>
  4. <option value="real madrid">Real Madrid</option>
  5. <option value="atletico madrid">Atl&eacute;tico Madrid</option>
  6. <option value="valencia">Valencia CF</option>
  7. <option value="betis" selected="selected">Real Betis</option>
  8. <option value="deportivo">Deportivo de la Coruña</option>
  9. </select>
  10. </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".

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().

  1. $(document).ready(function(){
  2. $("#equipos").change(function(){
  3. ...
  4. });
  5. });

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

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

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:

  1. $("#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()

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

De esta manera tendremos la primera ejecución del .change(). El código entero nos quedará de la siguiente forma:

  1. $(document).ready(function(){
  2. $("#equipos").change(function(){
  3.  
  4. var texto = "Opciones Seleccionadas: ";
  5. $("#equipos option:selected").each(function() {
  6. texto += $(this).text() + " - ";
  7. });
  8.  
  9. $("#resultado").text(texto);
  10.  
  11. }).trigger('change');
  12. });

Vídeos sobre jQuery


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

2 comentarios en “Listar opciones seleccionadas de un combo con jQuery”

Víctor Cuervo

Yuri Novaes

Olá Victor,

Muito bom o seu post. Eu usava um com checkbox e andava procurando um com select multiple e este seu artigo me ajudou a ver meu código e alterar só esta parte $(“#equipos option:selected”) e pegar o val() ao invés do text().
Muito obrigado!

Sds,

Yuri Novaes

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*