Combos

Hernan
27 de Julio del 2005
Hola a todos estoy iniciando en esto de php y tengo la siguiente situacion:

En una tabla tengo los paises, en otra los estados y por ultimo las ciudades; quiero que cuando el usuario seleccione un pais de un combo o lista, mas abajo en otra lista que se listen los estados del pais seleccionado y al seleccionar un pais en otro combo se listen las ciudades del estado.

Gracias por leer y colaborar.

christian filth
27 de Julio del 2005
aqui tienes un ejemplo de combos dinamicos solo es cuestion de q analicez el codigo y lo modifiques segun tus necesidades ok, suerte.

<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>