| ||||
|
|
|
|
|
|
| |||
|
| |||
| ||||
Home - HTMLWebScript - Formularios - Triple combo - 1 - 2 - 3 - 4
Triple combo (III)
por Luciano Moreno, del departamento de diseño web de BJS Software.
Tres combos.-
Ahora tenemos tres combos, con lo que los posibles casos de elección continuada del usuario aumentan bastante. Para simplificar, vamos a considerar que cada uno de los combos puede tener tres opciones posibles (la primera no tiene valor práctico en este ejemplo, por lo que nos quedan dos opciones operativas).
El código necesario es parecido al anterior, aunque ahora hay que considerar nuevas funciones, una por cada uno de los casos posibles de elección en el segundo combo.
Además, tendremos que tener en cuenta los casos siguientes:
1. El usuario, trás haber realizado una selección en el primer y segundo combo, vuelve a seleccionar la opción 0 en el segundo (la que apacere por defecto). En este caso deberemos volver a vaciar el tercer combo.
2. El usuario, trás haber realizado una selección en el primer combo, o en el primero y en el segundo, vuelve a seleccionar la opción por defecto del primer combo. En este caso deberemos vaciar el segundo y el tercer combo, dejando el sistema con su configuración inicial.
Para ello necesitamos es una nueva variable, que vamos a llamar primerCombo, y que va a valer inicialmente 0, que almacenará la opción elegida por el usuario en el primer combo, para saber así cuál función deberemos llamar luego para pintar el tercero.
El código necesario puede ser del tipo:
<html>
<head>
<title>HTMLWeb. WebScript.
Formularios. Triple combo simple</title>
<!-- Definimos un
estilo para los combos, con objeto de que mantengan un ancho fijo
-->
<style type="text/css">
select{width:200px;}
</style>
<script
language="JavaScript" type="text/javascript">
/**
* variable global de ayuda, que almacenara la opcion
elegida por el usuario en el primer combo
*/
var primerCombo=0;
/**
/* funcion principal de decisiones del primer combo:
hace una cosa u otra en funcion de la
* opcion
seleccionada en el mismo
*/
function
combo()
{
/**
* si el usuario selecciona ha
seleccionado anteriormente alguna opcion del primer combo
>>>
*/
if(primerCombo!=0)
{
/**
* si
elige la primea opcion del primer combo > ponemos el segundo combo a
cero
*/
if(document.forms.form1.menu1.selectedIndex==0)
{
document.forms.form2.menu2.options[0].value="0";
document.forms.form2.menu2.options[0].text="---------------------------------";
document.forms.form2.menu2.length=1;
}
/**
* en
otro caso > ponemos tambien a cero el tercer combo, dejando el segundo con el
valor
predeterminado
*/
document.forms.form2.menu2.selectedIndex=0;
document.forms.form3.menu3.options[0].value="0";
document.forms.form3.menu3.options[0].text="---------------------------------
";
document.forms.form3.menu3.length=1;
}
/**
* si elige la segunda o la
tercera opcion > llamamos a la funcion
correspondiente
*/
var
indice=document.forms.form1.menu1.selectedIndex;
if(indice==1) menu1();
if(indice==2) menu2();
}
/**
/* funcion principal de decisiones del segundo combo:
hace una cosa u otra en funcion de la
* opcion
seleccionada en el mismo
*/
function
combo2()
{
var
indice2=document.forms.form2.menu2.selectedIndex;
if(indice2==0) submenu0();
if(indice2==1) submenu1();
if(indice2==2) submenu2();
}
/**
* funcion de relleno del segundo combo si se elige la
primera opcion
*/
function
menu1()
{
primerCombo=1;
sub0=new
Option("-elije una
subopcion-","sub0","defauldSelected");
sub1=new Option("una
una","una-una");
sub2=new
Option("una dos","una-dos");
document.forms.form2.menu2.options[0]=sub0;
document.forms.form2.menu2.options[1]=sub1;
document.forms.form2.menu2.options[2]=sub2;
}
/**
* funcion de relleno del
segundo combo si se elige la primera opcion
*/
function menu2()
{
primerCombo=2;
sub0=new
Option("-elije una
subopcion-","sub0","defauldSelected");
sub1=new Option("dos
una","dos-una");
sub2=new
Option("dos dos","dos-dos");
document.forms.form2.menu2.options[0]=sub0;
document.forms.form2.menu2.options[1]=sub1;
document.forms.form2.menu2.options[2]=sub2;
}
/**
* funcion de relleno del
tercer combo si se elige la primera opcion del segundo combo
* despues de haber hecho una seleccion anterior > pone
a cero el tercer combo
*/
function
submenu0()
{
document.forms.form3.menu3.options[0].value="0";
document.forms.form3.menu3.options[0].text="---------------------------------
";
document.forms.form3.menu3.length=1;
}
/**
* funcion de relleno del
tercer combo si se elige la segunda opcion del segundo
combo
*/
function
submenu1()
{
/**
* cuando se eligio la
segunda opcion del primer
combo
*/
if(primerCombo==1)
{
sub0=new Option("elije una sub-sub
opcion","sub0","defauldSelected");
sub1=new Option("una una
una","una-una-una");
sub2=new Option("una una
dos","una-una-dos");
document.forms.form3.menu3.options[0]=sub0;
document.forms.form3.menu3.options[1]=sub1;
document.forms.form3.menu3.options[2]=sub2;
}
/**
* cuando se eligio la
tercera opcion del primer
combo
*/
else
if(primerCombo==2)
{
sub0=new Option("elije una sub-sub
opcion","sub0","defauldSelected");
sub1=new Option("dos una
una","dos-una-una");
sub2=new Option("dos una
dos","dos-una-dos");
document.forms.form3.menu3.options[0]=sub0;
document.forms.form3.menu3.options[1]=sub1;
document.forms.form3.menu3.options[2]=sub2;
}
}
/**
* funcion de relleno del tercer combo si se elige la
tercera opcion del segundo combo
*/
function submenu2()
{
/**
* cuando se eligio la
segunda opcion del primer
combo
*/
if(primerCombo==1)
{
sub0=new Option("elije una sub-sub
opcion","sub0","defauldSelected");
sub1=new Option("una dos
una","una-dos-una");
sub2=new Option("una dos
dos","una-dos-dos");
document.forms.form3.menu3.options[0]=sub0;
document.forms.form3.menu3.options[1]=sub1;
document.forms.form3.menu3.options[2]=sub2;
}
/**
* cuando se eligio la
tercera opcion del primer
combo
*/
else
if(primerCombo==2)
{
sub0=new Option("elije una sub-sub
opcion","sub0","defauldSelected");
sub1=new Option("dos dos
una","dos-dos-una");
sub2=new Option("dos dos
dos","dos-dos-dos");
document.forms.form3.menu3.options[0]=sub0;
document.forms.form3.menu3.options[1]=sub1;
document.forms.form3.menu3.options[2]=sub2;
}
}
</script>
</head>
<body>
<table
align="center">
<tr>
<td
width="150">
<form
name="form1">
<select name="menu1"
onChange="combo()">
<option value="opcion0">-elije una opción-
<option
value="opcion1">una
<option value="opcion2">dos
</select>
</form>
</td>
<td
width="150">
<form
name="form2">
<select name="menu2"
onChange="combo2()">
<option
value="opcion0">---------------------------------
</select>
</form>
</td>
<td>
<form
name="form3">
<select
name="menu3">
<option
value="opcion0">---------------------------------
</select>
</form>
</td>
</tr>
</table>
</body>
</html>
El efecto producido por el mismo lo tenéis en esta ventana.
 |
 |
Home - HTMLWebScript - Formularios - Triple combo - 1 - 2 - 3 - 4