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