Elementos de Lista

engllp · #1 (**permalink**) 24/06/2003, 10:22

Como puedo hacer para mover 1 elemento de una lista haciendo click en alguno de los dos botones. Por ejemplo Tengo una lista con 2 botones a la derecha de la lista(Flecha arriba y flecha abajo)¿Como puedo hacer cuando haga click en el boton de Flecha arriba el elemento seleccionado suba 1 elemento hacia arribab y de la misma forma suceda coon el botn Flecha Abajo?

Saludos,

LLP

JavierB · #2 (**permalink**) 24/06/2003, 11:35

Hola, engllp.

Prueba este código:

Código PHP:

  <html> 
<head> 
<script> 
function arriba() { 
    obj=document.getElementById('sel'); 
    indice=obj.selectedIndex; 
    if (indice>0) cambiar(obj,indice,indice-1); 
} 
function cambiar(obj,num1,num2) { 
    proVal=obj.options[num1].value; 
    proTex=obj.options[num1].text; 
    obj.options[num1].value=obj.options[num2].value;     
    obj.options[num1].text=obj.options[num2].text;     
    obj.options[num2].value=proVal; 
    obj.options[num2].text=proTex; 
} 
</script> 
</head> 
 
<body bgcolor="#FFFFFF" text="#000000"> 
<select id="sel" size="5"> 
<option value="1">Uno</option> 
<option value="2">Dos</option> 
<option value="3">Tres</option> 
</select> 
<input type="button" value="Arriba" onClick="arriba()"> 
</body> 
</html>

Habrás visto que solo tiene un botón para ir hacia arriba. Lo de ir hacia abajo creo que no te costará mucho trabajo hacerlo. Si tienes algún problema dilo y te ayudo.

Saludos,

unKnown · #3 (**permalink**) 24/06/2003, 14:23

Dos pequeñas modificasiones

Código PHP:

  function arriba() { 
    obj=document.getElementById('sel'); 
    indice=obj.selectedIndex; 
    if (indice>0) cambiar(obj,indice,indice-1); 
} 
function abajo(){ 
    obj=document.getElementById('sel'); 
    indice=obj.selectedIndex; 
    if (indice<obj.length-1) cambiar(obj,indice,indice+1); 
} 
function cambiar(obj,num1,num2) { 
    proVal=obj.options[num1].value; 
    proTex=obj.options[num1].text; 
    obj.options[num1].value=obj.options[num2].value;     
    obj.options[num1].text=obj.options[num2].text;     
    obj.options[num2].value=proVal; 
    obj.options[num2].text=proTex; 
    obj.selectedIndex=num2; 
}

para que funcione para abajo tambien y para que no cambie la seleccion

unKnown · #4 (**permalink**) 24/06/2003, 14:27

claro con su boton

<input type="button" value="Arriba" onClick="abajo()">

JavierB · #5 (**permalink**) 25/06/2003, 01:56

Hola, unKnown.

Lo de la función abajo no hice por pura pereza

Lo de mantener la selección me di cuenta cuando estaba a punto de irme a cenar y, oye, la cena es la cena. Gracias por tu aportación, pero voy a proponer una modificación (toma rima)

function abajo(){
obj=document.getElementById('sel');
indice=obj.selectedIndex;
if (indice<obj.length-1 && indice!=-1) cambiar(obj,indice,indice+1);

Es para que si no hay nada seleccionado no cambie nada.

Saludos,

unKnown · #6 (**permalink**) 25/06/2003, 13:03

por supuesto la cena es la cena