Ordenar Options de Select

sanmi69 · #1 (**permalink**) 13/11/2007, 05:35

Hola, necesitaria ordenar los campos de una lista (select).

esto es, aparece una lista con las opciones disponibles y dos botones, uno para subir y otro para bajar.

Pues lo que kiero esq cuando se le de al boton subir, si hay alguna opcion seleccionada suba hacia arriba.

Para bajar lo mismo.

Y el select es multiseleccion, por lo que si hay varias seleccionadas pues tiene q subir/bajar esas opciones.

gracias

derkenuke · #2 (**permalink**) 13/11/2007, 07:11

Hola sanmi69:

¿Lo has intentado? ¿Con qué código base contamos? Acostumbrate a colocar un código sobre el que todos podamos trabajar por igual.

Te dejo aquí un boceto, la función abajo() te la puedes imaginar:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>Página nueva</title>
<style type="text/css">

</style>
</head>

<body>



<select multiple="multiple" size="10" id="elSelect">
    <option value="0">cero</option>
    <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>
    <option value="6">seis</option>
    <option value="7">siete</option>
    <option value="8">ocho</option>
    <option value="9">nueve</option>
</select>
<button type="button" onclick="arriba()">Arriba</button>
<button type="button" onclick="abajo()">Abajo</button>




<script type="text/javascript">
<!--

// document.getElementById abreviado
function $(x) { return document.getElementById(x); }

function arriba() {
    var elSel = $("elSelect");
    var opciones = elSel.options;
    var opcionesSeleccionadas = [];
    for(var i=0, l=opciones.length; i<l; i++) {
        if( opciones[i].selected )
            opcionesSeleccionadas.push( opciones[i] );
    }
    // ahora tenemos que sustituir opcionA por opcionB (burdamente porque el IE no deja directamente)
    function cambiarPosicionOption(optionA, optionB) {
        elSel.options[ optionA.index ] = new Option(optionB.text, optionB.value);
        elSel.options[ optionB.index ] = new Option(optionA.text, optionA.value);
    }
    for(var i=0, l=opcionesSeleccionadas.length; i<l; i++) {
        // sustituimos cada opcion por la anterior
        var hayAnterior = opcionesSeleccionadas[i].index > 0;
        if( hayAnterior ) {
            var elAnterior = elSel.options[ opcionesSeleccionadas[i].index - 1 ];
            cambiarPosicionOption( opcionesSeleccionadas[i], elAnterior);
        }
    }
}

function abajo() {
    
}

// -->
</script>

</body>
</html>

Un saludo.

sanmi69 · #3 (**permalink**) 13/11/2007, 08:12

gracias, era lo que necesitaba, te cojo el codigo para modificarlo para que valga para la aplicacion.

No puse el codigo, porq crei que no hacia falta, ya que solo era un select, y 2 botones.

Muchas gracias

PD: Intener lo he intentaqdo, pero en temas de javascript.....

derkenuke · #4 (**permalink**) 13/11/2007, 08:40

Hola de nuevo:

Me he dado cuenta que si no se mantiene seleccionada la option (u options) se pierde el rastro de lo que hemos movido o no. Puedes cambia la función cambiarDePosicionOption() por lo siguiente para que se vea mejor:

Código PHP:

      function cambiarPosicionOption(optionA, optionB) {
        var indiceDeB = optionB.index;
        elSel.options[ optionA.index ] = new Option(optionB.text, optionB.value);
        elSel.options[ indiceDeB ] = new Option(optionA.text, optionA.value);
        elSel.options[ indiceDeB ].selected = true;
    }

Un saludo.

sanmi69 · #5 (**permalink**) 23/11/2007, 06:20

Cita:

Iniciado por derkenuke

Hola de nuevo:

Me he dado cuenta que si no se mantiene seleccionada la option (u options) se pierde el rastro de lo que hemos movido o no. Puedes cambia la función cambiarDePosicionOption() por lo siguiente para que se vea mejor:

Código PHP:

      function cambiarPosicionOption(optionA, optionB) {
        var indiceDeB = optionB.index;
        elSel.options[ optionA.index ] = new Option(optionB.text, optionB.value);
        elSel.options[ indiceDeB ] = new Option(optionA.text, optionA.value);
        elSel.options[ indiceDeB ].selected = true;
    }

Un saludo.

si, modifique el script para que se mantubiera marcado.

Ademas tb pasaba q si tenias seleccionada 2 opciones y llegabas al tope de arriba con la primera, la segunda podia seguir subiendo.

Aparte el metodo de cambiar posicion lo que sacado del metodo que sube/baja, ya que asi no duplico codigo

Asik cuelgo mis metodos modificados para el que le valgan:

Código PHP:

  /**
 * fCambiarPosicionOption
 * sustituir opcionA por opcionB (IE no deja directamente)
 */
function fCambiarPosicionOption(objCombo,optionA, optionB) {
        objCombo.options[ optionA.index ] = new Option(optionB.text, optionB.value);
        objCombo.options[ optionB.index ] = new Option(optionA.text, optionA.value);
}

/**
 * fSubirOption
 * Sube una posicion los elementos seleccionados
 */

function fSubirOption(objCombo){
    var opciones = objCombo.options;
    var opcionesSeleccionadas = [];
    for(var i=0, l=opciones.length; i<l; i++) {
        if( opciones[i].selected )
            opcionesSeleccionadas.push( opciones[i] );
    }
    var hayAnterior=true;
    for(var i=0, l=opcionesSeleccionadas.length; i<l && hayAnterior; i++) {
        // sustituimos cada opcion por la anterior
        var indexSel= opcionesSeleccionadas[i].index;
        hayAnterior = indexSel > 0;
        if( hayAnterior ) {
            var elAnterior = objCombo.options[ opcionesSeleccionadas[i].index - 1 ];
            fCambiarPosicionOption(objCombo,opcionesSeleccionadas[i], elAnterior);
            objCombo.options[indexSel-1].selected=true;
        }
    }
}

/**
 * fBajarOption
 * Baja una posicion los elementos seleccionados
 */

function fBajarOption(objCombo){
    var opciones = objCombo.options;
    var opcionesSeleccionadas = [];
    for(var i=opciones.length-1, l=0; i>=l; i--) {
        if( opciones[i].selected )
            opcionesSeleccionadas.push( opciones[i] );
    }
    var hayPosterior=true;
    for(var i=0, l=opcionesSeleccionadas.length; i<l && hayPosterior; i++) {
        // sustituimos cada opcion por la anterior
        var indexSel= opcionesSeleccionadas[i].index;
        hayPosterior = indexSel < opciones.length-1;
        if( hayPosterior ) {
            var elPosterior = objCombo.options[ opcionesSeleccionadas[i].index + 1 ];
            fCambiarPosicionOption(objCombo,opcionesSeleccionadas[i], elPosterior);
            objCombo.options[indexSel+1].selected=true;
        }
    }
}

ademas es mas logico seleccionar lo que antes estaba selecionado en le metodo de subir/bajar, que e el de cambiar posicion, yauw e asi el metodo de cambiar posicion es reutilizable para cuando lo necesitemos

derkenuke · #6 (**permalink**) 23/11/2007, 09:15

Muy bien sanmi69, ¡perfecto!