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,