| ||||
|
|
|
|
|
|
| |||
|
| |||
| ||||
Home - HTMLWebScript - Formularios - Triple combo - 1 - 2 - 3 - 4
Triple combo (II)
por Luciano Moreno, del departamento de diseño web de BJS
Software.
Dos combos.-
En primer lugar, para darnos cuenta del esquema general de trabajo y de cómo crece luego la complejidad al aumentar el número de combos, vamos a ver la creación de un doble combo. La idea es presentar al usuario un primer combo con varias opciones, y un segundo combo inicialmente vacío. Cuando el visitante seleccione una de las opciones del primer combo el segundo se debe rellenar dinámicamente con las opciones asociadas a la elegida.
Para ello vamos a manejar los siguientes objetos, propiedades, métodos y eventos de JavaScript:
1. Objeto select, que representa una lista de selección (combo) contenida en un formulario de la página, al que vamos a acceder mediante su nombre identificador y el objeto padre forms:
document.forms.name_formulario.name_select..........
2. Objeto options, matriz que contiene todas y cada una de las opciones presentes en un objeto select. Para acceder pues a una opción cualquiera de una lista de selección y a sus propiedades usaremos la sintaxis:
document.forms.name_formulario.name_select.options[indice_opcion].propiedad....
3. Las propiedades text y value de un elemento options. La primera define y almacena el valor del texto asociado a la opción, texto que aparece al usuario en pantalla, mientras que la segunda define y almacena el valor del atributo value asociado a la opción, valor que no es visible por el usuario, pero que es el que se envía con el formulario para su proceso. Digamos que text es visual, mientras que value es operativo, ya que no importa el texto que aparece en cada opción a nivel de proceso de datos; sólo importa el valor de value. Para acceder a estas propiedades usaremos la sintaxis:
document.forms.name_formulario.name_select.options[indice_opcion].text;
document.forms.name_formulario.name_select.options[indice_opcion].value;
4. El método constructor new Option("texto_opcion", "valor_opcion"), que define una nueva opción para un combo, recibiendo como argumentos el texto y el value que aparecerá y será asociado a la misma. Su forma general de uso es:
var miOpcionN=new option("texto_N","value_N");
document.forms.name_formulario.name_select.options[n]=miOptionN;
Cuyo resultado será que en el formulario indicado aparecerá una nueva opción en la posición N, cuyo texto en pantalla y su value serán los establecidos en el constructor.
5. La propiedad selectedIndex, que almacena o fija el índice correspondiente a la opción seleccionada en un combo. La forma de acceso a la misma es:
document.forms.name_formulario.name_select.selectedIndex;
6. El capturador de evento onchange, que se activa cuando se cambia la opción seleccionada en un combo, y que nos permite llamar en este caso a una función JavaScript predefinida. Su sintaxis es del tipo:
<select name="nombre_select" onchange="funcion(parametro1, parametro2, ..., parametro m)">
Bien, amigos. Con estas herramientas para usar, el código de nuestro doble combo puede ser el que sigue:
<html>
<head>
<title>HTMLWeb. WebScript.
Formularios. Triple combo 0</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">
/**
/* funcion principal de decisiones: hace una cosa u
otra en funcion de la
* opcion seleccionada en el primer
combo
*/
function
combo()
{
/**
* variable que almacena la
opcion elegida en el primer combo
*/
var
indice=document.forms.form1.menu1.selectedIndex;
/**
* si se elige la primera
opcion (la que aparece por defecto) > se pone el segundo combo a
cero
*/
if(indice==0)
{
document.forms.form2.menu2.options[0].value="0";
document.forms.form2.menu2.options[0].text="---------------------------------";
document.forms.form2.menu2.length=1;
}
/**
* si se elige la segunda o la
tercera > llamamos a la funcion
correspondiente
*/
if(indice==1)
menu1();
if(indice==2)
menu2();
}
/**
* funcion de relleno del segundo combo si se elige la primera
opcion
*/
function
menu1()
{
segundoCombo=1;
sub0=new
Option("-elige 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()
{
segundoCombo=2;
sub0=new
Option("-elige 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;
}
</script>
</head>
<body>
<table
align="center">
<tr>
<td
width="150">
<form
name="form1">
<select name="menu1"
onChange="combo()">
<option value="opcion0">-elige una opción-
<option
value="opcion1">una
<option value="opcion2">dos
</select>
</form>
</td>
<td
width="150">
<form
name="form2">
<select
name="menu2">
<option
value="opcion0">---------------------------------
</select>
</form>
</td>
</tr>
</table>
</body>
</html>
Como véis, si se comprenden bien los elementos manejados, el código es sencillo.
El efecto producido por el mismo lo tenéis en esta ventana.
 |
 |
Home - HTMLWebScript - Formularios - Triple combo - 1 - 2 - 3 - 4