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