Foros del Web - Ver Mensaje Individual

abimaelrc · #1 (**permalink**) 08/03/2011, 09:56

Saludos corillo,

Estoy trabajando con una aplicación que requiere de multiples selects y que todos se formen de acuerdo a un valor seleccionado. Lo logré pero es un poco complicado trabajarlo. Esta es la forma como lo hago al momento.

Nota: Estos los formo con PHP por lo que se me hace menos difícil formarlos

Código HTML:

Ver original<script type="text/javascript">
function nullOptions(obj){
    var n=obj.options.length
    for (i=0;i<n;i++){
        obj.options[i]=null
    }
    obj.options.length=0;
}
 
 
/**
 * Seconds elements
 */
function secondElements1(obj){
    nullOptions(obj);
    var n=0;
    with(obj){
        options[n++]=new Option("Selecciona bar","");
        options[n++]=new Option(20, 20);
        options[n++]=new Option(30, 30);
        options[n++]=new Option(40, 40);
    }
}
function secondElements2(obj){
    nullOptions(obj);
    var n=0;
    with(obj){
        options[n++]=new Option("Selecciona bar","");
        options[n++]=new Option(200, 200);
        options[n++]=new Option(300, 300);
        options[n++]=new Option(400, 400);
    }
}
function secondElements3(obj){
    nullOptions(obj);
    var n=0;
    with(obj){
        options[n++]=new Option("Selecciona bar","");
        options[n++]=new Option(2000, 2000);
        options[n++]=new Option(3000, 3000);
        options[n++]=new Option(4000, 4000);
    }
}
 
/**
 * Thirds elements
 */
 
/**
 * Elementos para el valor 20, 30 y 40 de bar
 */
function thirdElements1000(obj){
    nullOptions(obj);
    var n=0;
    with(obj){
        options[n++]=new Option("Selecciona candy","");
        options[n++]=new Option(21, 21);
        options[n++]=new Option(22, 22);
        options[n++]=new Option(23, 23);
    }
}
function thirdElements1001(obj){
    nullOptions(obj);
    var n=0;
    with(obj){
        options[n++]=new Option("Selecciona candy","");
        options[n++]=new Option(31, 31);
        options[n++]=new Option(32, 32);
        options[n++]=new Option(33, 33);
    }
}
function thirdElements1002(obj){
    nullOptions(obj);
    var n=0;
    with(obj){
        options[n++]=new Option("Selecciona candy","");
        options[n++]=new Option(41, 41);
        options[n++]=new Option(42, 42);
        options[n++]=new Option(43, 43);
    }
}
 
/**
 * Elementos para los valores 200, 300 y 400 de bar
 */
function thirdElements1003(obj){
    nullOptions(obj);
    var n=0;
    with(obj){
        options[n++]=new Option("Selecciona candy","");
        options[n++]=new Option(210, 210);
        options[n++]=new Option(220, 220);
        options[n++]=new Option(230, 230);
    }
}
function thirdElements1004(obj){
    nullOptions(obj);
    var n=0;
    with(obj){
        options[n++]=new Option("Selecciona candy","");
        options[n++]=new Option(310, 310);
        options[n++]=new Option(320, 320);
        options[n++]=new Option(330, 330);
    }
}
function thirdElements1005(obj){
    nullOptions(obj);
    var n=0;
    with(obj){
        options[n++]=new Option("Selecciona candy","");
        options[n++]=new Option(410, 410);
        options[n++]=new Option(420, 420);
        options[n++]=new Option(430, 430);
    }
}
 
/**
 * Elementos para los valores 2000, 3000 y 4000 de bar
 */
function thirdElements1006(obj){
    nullOptions(obj);
    var n=0;
    with(obj){
        options[n++]=new Option("Selecciona candy","");
        options[n++]=new Option(2100, 2100);
        options[n++]=new Option(2200, 2200);
        options[n++]=new Option(2300, 2300);
    }
}
function thirdElements1007(obj){
    nullOptions(obj);
    var n=0;
    with(obj){
        options[n++]=new Option("Selecciona candy","");
        options[n++]=new Option(3100, 3100);
        options[n++]=new Option(3200, 3200);
        options[n++]=new Option(3300, 3300);
    }
}
function thirdElements1008(obj){
    nullOptions(obj);
    var n=0;
    with(obj){
        options[n++]=new Option("Selecciona candy","");
        options[n++]=new Option(4100, 4100);
        options[n++]=new Option(4200, 4200);
        options[n++]=new Option(4300, 4300);
    }
}
 
function firstFunction(obj){
    var firstElement = obj.first;
    var secondElement = obj.second;
    var thirdElement = obj.third;
    switch(firstElement.selectedIndex){
        case 0:
            secondElement.options.length=0;
            secondElement.options[0]=new Option("[Selecciona foo]","");
            secondElement.options[0].selected=true;
 
            thirdElement.options.length=0;
            thirdElement.options[0]=new Option("[Selecciona foo]","");
            thirdElement.options[0].selected=true;
            break;
        case 1:
            secondElements1(secondElement);
            secondElement.options[0].text="[Selecciona bar]";
 
            thirdElement.options.length=0;
            thirdElement.options[0]=new Option("[Selecciona bar]","");
            thirdElement.options[0].selected=true;
            break;
        case 2:
            secondElements2(secondElement);
            secondElement.options[0].text="[Selecciona bar]";
 
            thirdElement.options.length=0;
            thirdElement.options[0]=new Option("[Selecciona bar]","");
            thirdElement.options[0].selected=true;
            break;
        case 3:
            secondElements3(secondElement);
            secondElement.options[0].text="[Selecciona bar]";
 
            thirdElement.options.length=0;
            thirdElement.options[0]=new Option("[Selecciona bar]","");
            thirdElement.options[0].selected=true;
            break;
    }
}
 
function secondFunction(obj){
    var firstElement = obj.first;
    var secondElement = obj.second;
    var thirdElement = obj.third;
    switch(firstElement.selectedIndex){
        case 0:
            secondElement.options.length=0;
            secondElement.options[0]=new Option("[Selecciona foo]","");
            secondElement.options[0].selected=true;
 
            thirdElement.options.length=0;
            thirdElement.options[0]=new Option("[Selecciona foo]","");
            thirdElement.options[0].selected=true;
            break;
        case 1:
            switch(secondElement.selectedIndex){
                case 0:
                    thirdElement.options.length=0;
                    thirdElement.options[0]=new Option("[Selecciona bar]","");
                    thirdElement.options[0].selected=true;
                    break;
                case 1:
                    thirdElements1000(thirdElement);
                    thirdElement.options[0]=new Option("[Selecciona candy]","");
                    thirdElement.options[0].selected=true;
                    break;
                case 2:
                    thirdElements1001(thirdElement);
                    thirdElement.options[0]=new Option("[Selecciona candy]","");
                    thirdElement.options[0].selected=true;
                    break;
                case 3:
                    thirdElements1002(thirdElement);
                    thirdElement.options[0]=new Option("[Selecciona candy]","");
                    thirdElement.options[0].selected=true;
                    break;
            }
            break;
        case 2:
            switch(secondElement.selectedIndex){
                case 0:
                    thirdElement.options.length=0;
                    thirdElement.options[0]=new Option("[Selecciona bar]","");
                    thirdElement.options[0].selected=true;
                    break;
                case 1:
                    thirdElements1003(thirdElement);
                    thirdElement.options[0]=new Option("[Selecciona candy]","");
                    thirdElement.options[0].selected=true;
                    break;
                case 2:
                    thirdElements1004(thirdElement);
                    thirdElement.options[0]=new Option("[Selecciona candy]","");
                    thirdElement.options[0].selected=true;
                    break;
                case 3:
                    thirdElements1005(thirdElement);
                    thirdElement.options[0]=new Option("[Selecciona candy]","");
                    thirdElement.options[0].selected=true;
                    break;
            }
            break;
        case 3:
            switch(secondElement.selectedIndex){
                case 0:
                    thirdElement.options.length=0;
                    thirdElement.options[0]=new Option("[Selecciona bar]","");
                    thirdElement.options[0].selected=true;
                    break;
                case 1:
                    thirdElements1006(thirdElement);
                    thirdElement.options[0]=new Option("[Selecciona candy]","");
                    thirdElement.options[0].selected=true;
                    break;
                case 2:
                    thirdElements1007(thirdElement);
                    thirdElement.options[0]=new Option("[Selecciona candy]","");
                    thirdElement.options[0].selected=true;
                    break;
                case 3:
                    thirdElements1008(thirdElement);
                    thirdElement.options[0]=new Option("[Selecciona candy]","");
                    thirdElement.options[0].selected=true;
                    break;
            }
            break;
    }
}
</script>
<form action="#">
    Foo:
    <select name="first" onchange="firstFunction(this.form)">
        <option value="">[Selecciona uno]</option>
        <option value="1">1</option>
        <option value="100">100</option>
        <option value="1000">1000</option>
    </select><br />
 
    Bar:
    <select name="second" onchange="secondFunction(this.form)">
        <option value="">[Selecciona Foo]</option>
    </select><br />
 
    Candy:
    <select name="third">
        <option value="">[Selecciona Foo]</option>
    </select>
</form>

Lo que me interesa saber es alguna otra forma de lograrlo pero sin un framework y sin ajax que también creo que es otra forma sencilla. Lo dejo por si le ayuda a alguien, aunque está demasiado grande el código para lograr lo que yo quiero. La razón por la pregunta es que luego voy a tener que trabajar que el último valor modifique otro valor y va a ser un código muy grande para trabajar. Bueno me dejan saber

¡Muchas gracias!