formularios dinamicos encadenados
Publicado por Angie Luque (1 intervención) el 30/06/2006 12:34:11
Hola, chicos... llevo una semana trabajando en un formulario dinámico, y ya me está volviendo loca... se trata de una seria de elementos "select" encadenados utilizados para determinar una localización geográfica. He definido distintas vistas para ellos, y la idea es que, por ejemplo, al seleccionar continente, aparezca la lista de paises de ese continente, y no del resto (eso funciona hasta ahora).
Ahora llega lo dificil... Quiero que, cuando, por ejemplo, elija "EuropeRussia" y elija "Irlanda", me aparezca debajo la lista de condados de Irlanda, pero no en otro caso.
Por el momento, lo voy haciendo pasito a paso, mi intención es lograr que si elijo "EuropeRussia", aparezca la lista de paises y directamente la lista de condados de Irlanda (ya que Irlanda es el país que aparece por defecto), y si elijo otro continente, que la lista de condados desaparezca...
Os agradecería muchísmo la ayuda, ya que es para la web de la empresa donde estoy haciendo mis prácticas, y realmente estoy atascada en esto... POR FAVOR, ALQUIEN PUEDE DECIRME DÓNDE ESTÁ EL FALLO?? QUÉ DEBO HACER??
Gracias por adelantado...
Os adjunto mi código:
<html>
<head>
// (...)
<style type="text/css">
//Definición de layers
#main{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
clip:rect(0px,100%,100%,0px);
background-color:#fffffff;
layer-background-color:#ffffff;
}
#Africa{
position:absolute;
top:547px;
left:262px;
width:210px;
height:23px;
clip:rect(0px,210px,23px,0px);
background-color:#ffffff;
layer-background-color:#ffffff;
visibility: hidden;
}
#AsiaOceania{
position:absolute;
top:547px;
left:262px;
width:210px;
height:23px;
clip:rect(0px,210px,23px,0px);
background-color:#ffffff;
layer-background-color:#ffffff;
visibility: hidden;
}
#EuropeRussia{
position:absolute;
top:547px;
left:262px;
width:210px;
height:23px;
clip:rect(0px,210px,23px,0px);
background-color:#ffffff;
layer-background-color:#ffffff;
visibility: visible;
}
#LatinAmericaCaribbean{
position:absolute;
top:547px;
left:262px;
width:210px;
height:23px;
clip:rect(0px,210px,23px,0px);
background-color:#ffffff;
layer-background-color:#ffffff;
visibility: hidden;
}
#MiddleEast{
position:absolute;
top:547px;
left:262px;
width:210px;
height:23px;
clip:rect(0px,210px,23px,0px);
background-color:#ffffff;
layer-background-color:#ffffff;
visibility: hidden;
}
#NorthAmerica{
position:absolute;
top:547px;
left:262px;
width:210px;
height:23px;
clip:rect(0px,210px,23px,0px);
background-color:#ffffff;
layer-background-color:#ffffff;
visibility: hidden;
}
#CountyIreland{
position:absolute;
top:581px;
left:188px;
width:280px;
height:23;
clip:rect(0px,280px,30px,0px);
background-color:#aaaaaa;
layer-background-color:#aaaaaa;
visibility: visible;
}
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
var nc = (document.layers) ? true:false
var ie = (document.all) ? true:false
var n6 = (document.getElementById) ? true:false
//Function to hide or show the layers
function showlayer(id)
{
if(ie) //ie4
{
document.all['Africa'].style.visibility="hidden";
document.all['AsiaOceania'].style.visibility="hidden";
document.all['EuropeRussia'].style.visibility="hidden";
document.all['LatinAmericaCaribbean'].style.visibility="hidden";
document.all['MiddleEast'].style.visibility="hidden";
document.all['NorthAmerica'].style.visibility="hidden";
document.all[id].style.visibility="visible";
if(document.all['EuropeRussia'].style.visibility=="visible")
{
document.all['CountyIreland'].style.visibility="visible";
}
else
document.all['CountyIreland'].style.visibility="hidden";
}
else if(nc)
{
document.main.document.layers['Africa'].visibility="hidde";
document.main.document.layers['AsiaOceania'].visibility="hidde";
document.main.document.layers['EuropeRussia'].visibility="hidde";
document.main.document.layers['LatinAmericaCaribbean'].visibility="hidde";
document.main.document.layers['MiddleEast'].visibility="hidde";
document.main.document.layers['NorthAmerica'].visibility="hidde";
if(id!='EuropeRussia')
{
document.main.document.layers['CountyIreland'].visibility="hidde";
}
document.main.document.layers[id].visibility="show";
}
else if(n6) //Mozilla, Explorer 5, 6, Netscape 6, 7 y Opera
{
document.getElementById('Africa').style.visibility="hidden";
document.getElementById('AsiaOceania').style.visibility="hidden";
document.getElementById('EuropeRussia').style.visibility="hidden";
document.getElementById('LatinAmericaCaribbean').style.visibility="hidden";
document.getElementById('MiddleEast').style.visibility="hidden";
document.getElementById('NorthAmerica').style.visibility="hidden";
document.getElementById(id).style.visibility="visible";
if(document.getElementById('EuropeRussia').style.visibility=="hidden")
{
document.getElementById('CountyIreland').style.visibility="hidden";
}
else
document.getElementById('CountyIreland').style.visibility="visible";
}
}
// (...)
</head>
<body>
//(...)
<select name="fldarea" onChange="showlayer(this.value);">
<option value="Africa">Africa</option>
<option value="AsiaOceania">Asia & Oceania</option>
<option value="EuropeRussia" selected >Europe & Russia</option>
<option value="LatinAmericaCaribbean" >Latin America & the Caribbean</option>
<option value="MiddleEast">Middle East</option>
<option value="NorthAmerica" >North America</option>
</select>
<div id="Africa">
<form name="frmCountryAfrica">
<select name="fldCountryAfrica">
<option value="Algeria">Algeria</option>
<option value="Angola">Angola</option>
// (...)
</select>
</form>
</div>
<div id="AsiaOceania">
<form name="frmCountryAsiaOceania">
<select name="fldCountryAsiaOceania">
<option value="Afghanistan">Afghanistan</option>
<option value="AmericanSamoa">American Samoa</option>
// (...)
</selet>
</form>
</div>
<div id="EuropeRussia">
<form name="frmCountryEuropeRussia" >
<select name="fldCountryEuropeRussia" onChange="showsublayer(this.value);">
<option value="Albania">Albania</option>
<option value="Andorra">Andorra</option>
//(...)
<option value="CountyIreland" selected>Ireland</option>
</select>
</form>
</div>
<div id="LatinAmericaCaribbean">
<form name="frmCountryLatinAmericaCaribbean">
<select name="fldCountryLatinAmericaCaribbean">
<option value="Anquilla">Anquilla</option>
<option value="AntiguaBarbuda">Antigua and Barbuda</option>
//(...)
</select>
</form>
</div>
<div id="MiddleEast">
<form name="frmCountryMiddleEast">
<select name="fldCountryMiddleEast">
<option value="Bahrain">Bahrain</option>
<option value="Cyprus">Cyprus</option>
//(...)
</select>
</form>
</div>
<div id="NorthAmerica">
<form name="frmNorthAmerica">
<select name="fldCountryNorthAmerica" onChange="showsublayer(this.value);">
<option value="Canada">Canada</option>
<option value="Mexico">Mexico</option>
<option value="States" >United States</option>
</select>
</form>
</div>
<div id="CountyIreland">
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td width="68">
County:
</td>
<td>
<form name="CountyIreland">
<select name="fldCountyIreland">
<option value="Antrim">Antrim</option>
<option value="Armagh">Armagh</option>
//(...)
<option value="Dublin" selected>Dublin</option>
//(...)
</select>
</form>
</td>
</tr>
</table>
</div>
//(...)
</body>
</html>
Ahora llega lo dificil... Quiero que, cuando, por ejemplo, elija "EuropeRussia" y elija "Irlanda", me aparezca debajo la lista de condados de Irlanda, pero no en otro caso.
Por el momento, lo voy haciendo pasito a paso, mi intención es lograr que si elijo "EuropeRussia", aparezca la lista de paises y directamente la lista de condados de Irlanda (ya que Irlanda es el país que aparece por defecto), y si elijo otro continente, que la lista de condados desaparezca...
Os agradecería muchísmo la ayuda, ya que es para la web de la empresa donde estoy haciendo mis prácticas, y realmente estoy atascada en esto... POR FAVOR, ALQUIEN PUEDE DECIRME DÓNDE ESTÁ EL FALLO?? QUÉ DEBO HACER??
Gracias por adelantado...
Os adjunto mi código:
<html>
<head>
// (...)
<style type="text/css">
//Definición de layers
#main{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
clip:rect(0px,100%,100%,0px);
background-color:#fffffff;
layer-background-color:#ffffff;
}
#Africa{
position:absolute;
top:547px;
left:262px;
width:210px;
height:23px;
clip:rect(0px,210px,23px,0px);
background-color:#ffffff;
layer-background-color:#ffffff;
visibility: hidden;
}
#AsiaOceania{
position:absolute;
top:547px;
left:262px;
width:210px;
height:23px;
clip:rect(0px,210px,23px,0px);
background-color:#ffffff;
layer-background-color:#ffffff;
visibility: hidden;
}
#EuropeRussia{
position:absolute;
top:547px;
left:262px;
width:210px;
height:23px;
clip:rect(0px,210px,23px,0px);
background-color:#ffffff;
layer-background-color:#ffffff;
visibility: visible;
}
#LatinAmericaCaribbean{
position:absolute;
top:547px;
left:262px;
width:210px;
height:23px;
clip:rect(0px,210px,23px,0px);
background-color:#ffffff;
layer-background-color:#ffffff;
visibility: hidden;
}
#MiddleEast{
position:absolute;
top:547px;
left:262px;
width:210px;
height:23px;
clip:rect(0px,210px,23px,0px);
background-color:#ffffff;
layer-background-color:#ffffff;
visibility: hidden;
}
#NorthAmerica{
position:absolute;
top:547px;
left:262px;
width:210px;
height:23px;
clip:rect(0px,210px,23px,0px);
background-color:#ffffff;
layer-background-color:#ffffff;
visibility: hidden;
}
#CountyIreland{
position:absolute;
top:581px;
left:188px;
width:280px;
height:23;
clip:rect(0px,280px,30px,0px);
background-color:#aaaaaa;
layer-background-color:#aaaaaa;
visibility: visible;
}
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
var nc = (document.layers) ? true:false
var ie = (document.all) ? true:false
var n6 = (document.getElementById) ? true:false
//Function to hide or show the layers
function showlayer(id)
{
if(ie) //ie4
{
document.all['Africa'].style.visibility="hidden";
document.all['AsiaOceania'].style.visibility="hidden";
document.all['EuropeRussia'].style.visibility="hidden";
document.all['LatinAmericaCaribbean'].style.visibility="hidden";
document.all['MiddleEast'].style.visibility="hidden";
document.all['NorthAmerica'].style.visibility="hidden";
document.all[id].style.visibility="visible";
if(document.all['EuropeRussia'].style.visibility=="visible")
{
document.all['CountyIreland'].style.visibility="visible";
}
else
document.all['CountyIreland'].style.visibility="hidden";
}
else if(nc)
{
document.main.document.layers['Africa'].visibility="hidde";
document.main.document.layers['AsiaOceania'].visibility="hidde";
document.main.document.layers['EuropeRussia'].visibility="hidde";
document.main.document.layers['LatinAmericaCaribbean'].visibility="hidde";
document.main.document.layers['MiddleEast'].visibility="hidde";
document.main.document.layers['NorthAmerica'].visibility="hidde";
if(id!='EuropeRussia')
{
document.main.document.layers['CountyIreland'].visibility="hidde";
}
document.main.document.layers[id].visibility="show";
}
else if(n6) //Mozilla, Explorer 5, 6, Netscape 6, 7 y Opera
{
document.getElementById('Africa').style.visibility="hidden";
document.getElementById('AsiaOceania').style.visibility="hidden";
document.getElementById('EuropeRussia').style.visibility="hidden";
document.getElementById('LatinAmericaCaribbean').style.visibility="hidden";
document.getElementById('MiddleEast').style.visibility="hidden";
document.getElementById('NorthAmerica').style.visibility="hidden";
document.getElementById(id).style.visibility="visible";
if(document.getElementById('EuropeRussia').style.visibility=="hidden")
{
document.getElementById('CountyIreland').style.visibility="hidden";
}
else
document.getElementById('CountyIreland').style.visibility="visible";
}
}
// (...)
</head>
<body>
//(...)
<select name="fldarea" onChange="showlayer(this.value);">
<option value="Africa">Africa</option>
<option value="AsiaOceania">Asia & Oceania</option>
<option value="EuropeRussia" selected >Europe & Russia</option>
<option value="LatinAmericaCaribbean" >Latin America & the Caribbean</option>
<option value="MiddleEast">Middle East</option>
<option value="NorthAmerica" >North America</option>
</select>
<div id="Africa">
<form name="frmCountryAfrica">
<select name="fldCountryAfrica">
<option value="Algeria">Algeria</option>
<option value="Angola">Angola</option>
// (...)
</select>
</form>
</div>
<div id="AsiaOceania">
<form name="frmCountryAsiaOceania">
<select name="fldCountryAsiaOceania">
<option value="Afghanistan">Afghanistan</option>
<option value="AmericanSamoa">American Samoa</option>
// (...)
</selet>
</form>
</div>
<div id="EuropeRussia">
<form name="frmCountryEuropeRussia" >
<select name="fldCountryEuropeRussia" onChange="showsublayer(this.value);">
<option value="Albania">Albania</option>
<option value="Andorra">Andorra</option>
//(...)
<option value="CountyIreland" selected>Ireland</option>
</select>
</form>
</div>
<div id="LatinAmericaCaribbean">
<form name="frmCountryLatinAmericaCaribbean">
<select name="fldCountryLatinAmericaCaribbean">
<option value="Anquilla">Anquilla</option>
<option value="AntiguaBarbuda">Antigua and Barbuda</option>
//(...)
</select>
</form>
</div>
<div id="MiddleEast">
<form name="frmCountryMiddleEast">
<select name="fldCountryMiddleEast">
<option value="Bahrain">Bahrain</option>
<option value="Cyprus">Cyprus</option>
//(...)
</select>
</form>
</div>
<div id="NorthAmerica">
<form name="frmNorthAmerica">
<select name="fldCountryNorthAmerica" onChange="showsublayer(this.value);">
<option value="Canada">Canada</option>
<option value="Mexico">Mexico</option>
<option value="States" >United States</option>
</select>
</form>
</div>
<div id="CountyIreland">
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td width="68">
County:
</td>
<td>
<form name="CountyIreland">
<select name="fldCountyIreland">
<option value="Antrim">Antrim</option>
<option value="Armagh">Armagh</option>
//(...)
<option value="Dublin" selected>Dublin</option>
//(...)
</select>
</form>
</td>
</tr>
</table>
</div>
//(...)
</body>
</html>
Valora esta pregunta
0