select con cambio de posición

u_goldman · #1 (**permalink**) 14/05/2003, 20:30

Hola chic@s

He visto por ahí un select con ciertos options, el tema es que mediante la selección de uno de estos options y dos botones(arriba, abajo) puedes cambiar la posición de dicho option, alguien tiene algún ejemplo de código?

Salu2,

JavierB · #2 (**permalink**) 15/05/2003, 10:18

Hola, u_goldman.

Con ayuda de una FAQ enviada por Kaopectate (hola, Kao

) he preparado este ejemplo. Solo sirve para subir elementos, pero creo que no te costará mucho adaptarlo para que tambien bajen:

Código PHP:

  <html> 
<head> 
<script> 
function subir(src) { 
    indice=src.selectedIndex; 
    if (indice>0) { 
        texto=src.options[indice].text; 
        texto1=src.options[indice-1].text; 
        selOpcion=new Option(texto); 
        src.options[indice-1]=selOpcion; 
        selOpcion=new Option(texto1); 
        src.options[indice]=selOpcion; 
    } 
} 
</script> 
</head> 
 
<body> 
<select name="sel"> 
<option>uno</option> 
<option>dos</option> 
<option>tres</option> 
<option>cuatro</option> 
<option>cinco</option> 
</select> 
<input type="button" value="Subir" onClick="subir(sel)"> 
</body> 
</html>

Ya nos contarás que ta te ha marchado. Saludos,

u_goldman · #3 (**permalink**) 15/05/2003, 12:13

JavierB, mil gracias!
como dijiste está muy fácil de entender, así que hice la función para bajar y además que conservara el value del option, aquí dejo el código como quedó:

ah, le puse unos text solo para probar que se quedaran con su respectivo value.

<html>
<head>
<script>
function subir(src)
{
indice=src.selectedIndex;
if (indice>0) {
texto=src.options[indice].text;
valor= src.options[indice].value;
texto1=src.options[indice-1].text;
valor1= src.options[indice-1].value;
selOpcion=new Option(texto);
src.options[indice-1]=selOpcion;
src.options[indice-1].value= valor;
selOpcion=new Option(texto1);
src.options[indice]=selOpcion;
src.options[indice].value= valor1;
}
}

function bajar(src)
{
indice = src.selectedIndex;
max_indice= 4;
if (indice < max_indice)
{
texto=src.options[indice].text;
valor= src.options[indice].value;
texto1=src.options[indice+1].text;
valor1= src.options[indice+1].value;
selOpcion=new Option(texto);
src.options[indice+1]=selOpcion;
src.options[indice+1].value= valor;
selOpcion=new Option(texto1);
src.options[indice]=selOpcion;
src.options[indice].value= valor1;
}
}

function este_indice(src)
{
mi_indice.value= src.selectedIndex;
mi_valor.value= src.value;
}
</script>
</head>

<body>
<select name="sel" size=6 onchange="este_indice(sel)">
<option value="1">uno</option>
<option value="2">dos</option>
<option value="3">tres</option>
<option value="4">cuatro</option>
<option value="5">cinco</option>
</select>
<input type=text name=mi_indice>
<input type=text name=mi_valor>
<input type="button" value="Subir" onClick="subir(sel)">
<input type="button" value="Bajar" onClick="bajar(sel)">
</body>
</html>

Nuevamente gracias y salu2,