Pasar datos de una lista a otra

Keleriano · #1 (**permalink**) 27/08/2006, 17:12

Saludos.

He revisado las FAQ y no consigo encontrar solución a mi problema. Tengo dos listas, en principio una vacía. En la primera lista almaceno los nombres de las bandas que existen en una base de datos, esa quedaría estática. Lo que quiero conseguir es que pulsando botones --> y <-- se agreguen o se borren bandas de la segunda lista sin que la página se recargue. ¿Como es posible esto?

Aquí el código del que dispongo hasta ahora:

Código PHP:

 
<form name="form1" method="post" action="">

    <select MULTIPLE NAME="lista" SIZE="20">

       <option SELECTED>--

<?

$sql = "SELECT id,banda FROM bandas ORDER BY banda";

$result = mysql_query($sql);

while($row=mysql_fetch_array($result)) {

    echo '<OPTION value="'.$row['id'].'">' . $row["banda"];  // Aquí relleno la primera lista

}

?>

   </select>

    <input type="button" value="-->" name="add">

    <input type="button" value="<--" name="remove">

    <select name="bandas" size="20">

   </select>

</form>

php.java.jsp · #2 (**permalink**) 27/08/2006, 17:59

quizas esto es lo que quieres

Código:

<html>
<head>
<title>MSQL</title>

<script type="text/javascript">

function agregar(){

	var sel="", aa = document.form1.lista.options.selectedIndex, rec =  new Array();

	if(aa !=-1){
		for(i=0;i<document.form1.lista.options.length;i++){
			rec[i] = document.form1.lista.options[i].value;
			if(document.form1.lista.options[i].selected){
				document.form1.sel2.options[i] =  new Option(rec[i],rec[i]);
			}
		}
	}

	else
		alert("no hay opciones selecciondas");
}


function restar(){

	var sel="", aa = document.form1.sel2.options.selectedIndex, rec =  new Array();

	if(aa !=-1){
		for(i=0;i<document.form1.sel2.options.length;i++){
			rec[i] = document.form1.sel2.options[i].value;
			if(document.form1.sel2.options[i].selected){
				document.form1.sel2.options[i] =  new Option("","");
			}
		}
	}

	else
		alert("no hay opciones selecciondas");

}

</script>

</head>

<body>


<form name="form1">

<select multiple  size="5" name="lista">
<option value="OPCION 1">OPCION 1</option>
<option value="OPCION 2">OPCION 2</option>
<option value="OPCION 3">OPCION 3</option>
<option value="OPCION 4">OPCION 4</option>
<option value="OPCION 5">OPCION 5</option>
</select>


<select style="width:180px;height: 90px" size="5" name="sel2">
</select>

<input type="button" value="agregar  -->" onclick="agregar()" />
<input type="button" value="<--  restar" onclick="restar()" />

</form>

</body>
</html>

VER EJEMPLO

xxkfjfredxx · #3 (**permalink**) 19/12/2014, 10:11

<html>
<head>
<title>MSQL</title>
<script type="text/javascript">
function agregar(){
var sel="";
var aa = document.form1.lista.options.selectedIndex;
var rec = new Array();

if(aa !=-1){
var x = document.getElementById("dos");
var option = document.createElement("option");

var x1 = document.getElementById("uno");
option.text = x1.options[x1.selectedIndex].value;
x.add(option);
var x = document.getElementById("uno");
x.remove(x.selectedIndex);
}
else
alert("no hay opciones selecciondas");
}

function restar(){

var sel="", aa = document.form1.sel2.options.selectedIndex, rec = new Array();

if(aa !=-1){
var x = document.getElementById("uno");
var option = document.createElement("option");

var x1 = document.getElementById("dos");
option.text = x1.options[x1.selectedIndex].value;
x.add(option);

var x = document.getElementById("dos");
x.remove(x.selectedIndex);
}
else
alert("no hay opciones selecciondas");
}
</script>
</head>
<body>

<form name="form1">
<select size="5" name="lista" id="uno" style="width:180px;height: 90px" size="5">
<option value="OPCION 1">OPCION 1</option>
<option value="OPCION 2">OPCION 2</option>
<option value="OPCION 3">OPCION 3</option>
<option value="OPCION 4">OPCION 4</option>
<option value="OPCION 5">OPCION 5</option>
</select>

<select style="width:180px;height: 90px" size="5" name="sel2" id="dos">
</select>

<input type="button" value="agregar -->" onclick="agregar()" />
<input type="button" value="<-- restar" onclick="restar()" />

</form>
</body>
</html>