BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Pasar opciones de un select list múltiple a otro con jQuery

12/JUN/2013 36.250 visitas Ver comentarios
Pasar opciones de un select list múltiple a otro con jQuery

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Este pequeño código es antiguo y, seguramente lo has necesitado más de una vez para filtrar opciones de un select moviendo las seleccionadas de la lista de origen a una nueva lista vacía.

Básicamente, tenemos dos selects (ORIGEN y DESTINO) declarados como múltiple, unos botones que harán el traspaso de valores de una lista a la otra y opciones para pasar o quitar todos los elementos con un solo click del ratón.

Debemos tener en cuenta que el nuevo elemento (select DESTINO) estará vacío y no se procesará en el formulario a menos que seleccionemos sus valores (lo veremos en los códigos) y que el ORIGEN también será procesado si le quedara alguna opción sin pasar al DESTINO.

Dicho ésto, vamos a ver lo que haremos por partes... empezando por crear las listas, agregaremos luego 4 botones para pasar y quitar de uno en uno los valores o todos a la vez.

También es importante recordar que si pasamos un valor a DESTINO y luego lo devolvemos a ORIGEN, éste no aparecerá en el lugar que tenía sino que se agregará al final de todo (lo digo por si la lista es grande y te parece que no funciona)

Finalmente, mediante jQuery, crearemos las acciones necesarias para realizar nuestro cometido y, al pulsar sobre el botón de SUBMIT, veremos como seleccionamos todas las opciones de DESTINO.

En la demo verás todo ésto que comento funcionando, pero los códigos no son más que los que ves aquí abajo. He intentado reducir las líneas de código al mínimo, pero ya sabes, si encuentras una forma mejor de hacer el paso de valores que la mía, me encantaría que la compartas.

Como siempre y para los que me escriben preguntando... copia, copia y copia! el código es para que lo copies, lo uses, lo regales, y si lo vendes, págame una birra :)

Código 1 - HTML
<form action="" method="post" id="formulario">
<div>
<select name="origen[]" id="origen" multiple="multiple" size="8">
<option value="1">Opción 1</option>
<option value="2">Opción 2</option>
<option value="3">Opción 3</option>
<option value="4">Opción 4</option>
<option value="5">Opción 5</option>
<option value="6">Opción 6</option>
<option value="7">Opción 7</option>
<option value="8">Opción 8</option>
</select>
</div>
<div>
<input type="button" class="pasar izq" value="Pasar »"><input type="button" class="quitar der" value="« Quitar"><br />
<input type="button" class="pasartodos izq" value="Todos »"><input type="button" class="quitartodos der" value="« Todos">
</div>
<div class="">
<select name="destino[]" id="destino" multiple="multiple" size="8"></select>
</div>
<p class="clear"><input type="submit" class="submit" value="Procesar formulario"></p>
</form>
Código 2 - JAVASCRIPT
$().ready(function() 
	{
		$('.pasar').click(function() { return !$('#origen option:selected').remove().appendTo('#destino'); });  
		$('.quitar').click(function() { return !$('#destino option:selected').remove().appendTo('#origen'); });
		$('.pasartodos').click(function() { $('#origen option').each(function() { $(this).remove().appendTo('#destino'); }); });
		$('.quitartodos').click(function() { $('#destino option').each(function() { $(this).remove().appendTo('#origen'); }); });
		$('.submit').click(function() { $('#destino option').prop('selected', 'selected'); });
	});

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 22 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018