Problema, agregar o borrar opciones con jquery

Stendelis · #1 (**permalink**) 25/03/2010, 08:10

Hola,

Necesito ayuda con este pequeño script..
La idea es simple:

tengo 1 select con varias opciones
tengo otro select vació
tengo un div vacío

Si selecciono del primer select y hago "add", la opcion seleccionada se agrega al select 2, se borra del select 1 y se crea un item en el listado con la opcion de borrar.

La opción de borrar en el listado quita del select 2 y del listado y agrega al select1.

La primera parte funciona bien, menos si selecciono varias opciones en el select1.
Y no logro que borre correctamente.

Ejecuten el siguiente código y vean los errores que dan. El código ya trae el jquery desde google.

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Prueba</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		window.onload=function(){
			 $("#add").click(function(){
				var nombre = $("#select1 option:selected").text();	
				var valor = $("#select1 option:selected").val();	
			  $("#destino").append("<li id='"+valor+"'>"+nombre+" <a class='delete' href='#'>x</a></li>");
			  $("#select1 option:selected").remove().appendTo("#select2");
			 });

			$("a.delete").click(function(){
				var parent = $(this).parent();
				$("#select2").find("option[value='"+parent.attr("id")+"']").remove().appendTo("#select1");
				parent.remove();
			});
		}
	</script>
</head>
<body>
<form action="" method="post">
    <label>Select 1:</label><br />
    <select name="select1" id="select1" size="5" multiple>
        <option value="1">Opcion 1</option>
        <option value="2">Opcion 2</option>
        <option value="3">Opcion 3</option>
        <option value="4">Opcion 4</option>
        <option value="5">Opcion 5</option>
    </select><br /><a href="#" id="add">Add</a><br /><br /><br />
    
    <label>Select 2:</label><br />
    <select name="select2" id="select2" size="5" multiple>
    </select>
</form><br /><br /><br />

     <ul id="destino">
     </ul>	

</body>
</html>

SergeMedina · #2 (**permalink**) 25/03/2010, 09:15

El problema es que cuando tienes seleccionado varios elementos del objeto select, $('select option:selected') te devuelve un array. Necesitas hacer un each para poder recorrer el array e insertarlos en el ul.

Al principio cuando se carga la pagina a.delete no existe en el DOM, por lo que necesitas buscar los elementos nuevos, esto lo logras con la funcion live de jquery, que le añade eventos a elementos aun cuando estos se agreguen al DOm despues de que la pagina haya sido cargada.

Código Javascript:

Ver original$(function(){
       $("#add").click(function(){
          $('#select1 option:selected').each(function(){
               var nombre = $(this).text();  
               var valor = $(this).val();
               $("#destino").append("<li id='"+valor+"'>"+nombre+" <a class='delete' href='#'>x</a></li>");
               $("#select1 option:selected").remove().appendTo("#select2");
          });
          return false;
       });
 
      $("a.delete").live('click',function(){
        var parent = $(this).parent();
        $("#select2").find("option[value='"+parent.attr("id")+"']").remove().appendTo("#select1");
        parent.remove();
        return false;
      });
});

Stendelis · #3 (**permalink**) 25/03/2010, 09:59

Gracias Serge, increíble funciona al pelo...

Stendelis · #4 (**permalink**) 26/03/2010, 07:24

Cita:

Iniciado por SergeMedina

El problema es que cuando tienes seleccionado varios elementos del objeto select, $('select option:selected') te devuelve un array. Necesitas hacer un each para poder recorrer el array e insertarlos en el ul.

Al principio cuando se carga la pagina a.delete no existe en el DOM, por lo que necesitas buscar los elementos nuevos, esto lo logras con la funcion live de jquery, que le añade eventos a elementos aun cuando estos se agreguen al DOm despues de que la pagina haya sido cargada.

Código Javascript:

Ver original$(function(){
       $("#add").click(function(){
          $('#select1 option:selected').each(function(){
               var nombre = $(this).text();  
               var valor = $(this).val();
               $("#destino").append("<li id='"+valor+"'>"+nombre+" <a class='delete' href='#'>x</a></li>");
               $("#select1 option:selected").remove().appendTo("#select2");
          });
          return false;
       });
 
      $("a.delete").live('click',function(){
        var parent = $(this).parent();
        $("#select2").find("option[value='"+parent.attr("id")+"']").remove().appendTo("#select1");
        parent.remove();
        return false;
      });
});

Como puedo modificar la funcion de #add, para que si la opcion ya esta agregada en el select2 no ejecute ninguno de los dos append.

Algo como lo que hice abajo, me funcionó, pero creo que no seria la forma correcta:

Código Javascript:

Ver original$("#add").click(function(){
          $('#select1 option:selected').each(function(){
               var nombre = $(this).text();  
               var valor = $(this).val();
               var agregar = true;
               
               $('#select2 option').each(function(){  
                    var valor2 = $(this).val();  
                    
                    if (valor2 == valor){
                        agregar = false;
                        }
                }); 
               
               if (agregar){
                   $("#destino").append("<li id='"+valor+"'>"+nombre+" <a class='delete' href='#'>x</a></li>");
                   $("#select1 option:selected").remove().appendTo("#select2 ");
               }           
          });
          return false;
       });