Problema, agregar o borrar opciones con jquery

[Stendelis]

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:

$(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:

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