Foros del Web - Ver Mensaje Individual

glmarzoa · #1 (**permalink**) 20/10/2008, 05:36

Hola a todas las buenas personas que aiudan por aki...

Sigo con problemillas en mi mega formulario... Ahora le toca el turno a los selects dependientes...Tengo un 1º select, que define categorías y un 2º select que define artículos. Relacionar estos selects funciona. Ahora, a partir del valor de este segundo select, aparecen una serie campos para que cubra el usuario. Los campos varían en función de cada artículo.
He probado a hacerlo con divs que aparezcan y desaparezcan, pero, no consigo ponerlas de modo superpuestas, y aparecen unas debajo de otras... También intenté meter un iframe, y hacer en el 2º select, que se cargara la página específica. pero así hay que hacer como "subformularios" y es bastante lío...
Os dejo el código, para que veáis por donde va la cosa... Se acepta cualquier sugerencia de como hacer esto, o como hacerlo más limpio..
<html>
<head>
<script>
function cambiar()
{
var index=document.forms.Equipos_tanques.Categoría.sel ectedIndex;
Equipos_tanques.Articulos.length=0;
if(index==0) categoria1();
if(index==1) categoria2();
}
function categoria1(){
opcion0=new Option("producto1","producto1");
opcion1=new Option("producto2","producto2","defauldSelected");
document.forms.Equipos_tanques.Articulos.options[0]=opcion0;
document.forms.Equipos_tanques.Articulos.options[1]=opcion1;
}
function categoria2(){
opcion0=new Option("producto3","producto3","defauldSelected");
opcion1=new Option("producto4","producto4");
opcion2=new Option("producto5","producto5");
document.forms.Equipos_tanques.Articulos.options[0]=opcion0;
document.forms.Equipos_tanques.Articulos.options[1]=opcion1;
document.forms.Equipos_tanques.Articulos.options[2]=opcion2;
}
</script>
<title>Documento sin título</title>
<style type="text/css">

</style>
</head>
<body>
<form name="Equipos_tanques" method="post" action="">
<div align="center">
<p>Tipo de Tanque</p>
<table width="93%" border="1" bordercolor="#999999">
<tr>
<td width="7%" > </td>
<td colspan="2" bordercolor="#990066" ><div align="center"></div></td>
<td width="47%" bordercolor="#990066" class="Estilo39"> (Estas capas tendrían que ir ocultándose en función de lo elegido en el select artículos y así la tabla quedar pequeña</td>
</tr>
<tr>
<td rowspan="2" ></td>
<td width="23%" height="39" bordercolor="#990066"><div align="center">
<p>Categorías</p>
<p><select name="Categoría" class="Estilo39" onChange="cambiar()">
<option value="cat1" selected="selected">Categoria 1</option>
<option value="cat2">Categoria2</option></select> </p>
</div></td>
<td width="23%" bordercolor="#990066"><div align="center">
<p>Artículos</p>
<p><select name="Articulos" class="Estilo39">
<option value="horizontal" selected="selected">producto1</option>
<option value="vertical">producto2</option></select></p>
</div></td>
<td rowspan="2" bordercolor="#990066"><div style="position:relative; width:80%; height:100%; background-color:#FFFFCC; align="center" id="prod1" class="tipostanque">
<p class="Estilo41">Producto 1 </p>
<table width="73%" border="0" cellspacing="2">
<tr>
<td width="36%" height="54" class="Estilo39">aa</td>
<td width="64%" ><div align="center">
<select>
<option>Si</option>
<option>No</option></select>
</div></td>
</tr>
<tr>
<td height="55" class="Estilo39">bb</td>
<td ><div align="center">
<select>
<option>Si</option>
<option>No</option>
</select>
</div></td>
</tr>
</table>
</div>
<div align="center" id="prod2" style="width:80%; height:100%; position:relative; background-color: #99FF99; layer-background-color: #99FF99; border: 1px none #000000;">
<p class="Estilo40"><span class="Estilo41">Producto 2 </span></p>
<table width="85%" height="182" border="0" cellspacing="2">
<tr>
<td width="64%" height="39" class="Estilo39">cc</td>
<td width="36%" ><div align="center">
<select>
<option>Si</option>
<option>No</option>
</select>
</div></td>
</tr>
<tr>
<td ><span class="Estilo39">dd</span></td>
<td><span class="Estilo39">
<input name="Altura máx liquido" type="text" id="Altura máx liquido" size="5" />
</span></td>
</tr>
<tr>
<td ><span class="Estilo39">ee</span></td>
<td><span class="Estilo39">
<input type="text" size="5" />
</span></td>
</tr>
<tr>
<td ><span class="Estilo39">ff</span></td>
<td><span class="Estilo39">
<input type="text" id="Altura_tk" size="5" />
</span></td>
</tr>
</table>
</div><div align="center" id="prod3" style="width:80%; height:100%" class="tipostanque" ></br>
Producto 3
<table width="87%" height="274" border="0" cellspacing="2">
<tr>
<td width="62%" ><span class="Estilo39">gg</span></td>
<td ><select name="select3" id="select26">
<option>Si</option>
<option>No</option>
</select></td>
</tr>
<tr>
<td ><div class="Estilo39">hh</div></td>
<td ><input name="Nº_columnas" type="text" id="Nº_columnas" size="10" /></td>
</tr>
<tr>
<td ><span class="Estilo39">ii</span></td>
<td ><input type="text" id="Diam_columnas" size="10" /></td>
</tr>
<tr>
<td ><span class="Estilo39">jj</span></td>
<td ><select>
<option>1</option>
<option>2</option>
<option>3</option>
</select></td>
</tr>
<tr>
<td ><span class="Estilo39">kk</span></td>
<td ><select>
<option>Si</option>
<option>No</option>
</select></td>
</tr>
</table>
</div>
<div align="center" id="prod4" style="width:80%; height:100%" class="tipostanque" >
<p class="Estilo40">Producto 4 </p>
<table width="87%" height="211" border="0" cellspacing="2">
<tr>
<td height="34" ><span class="Estilo39">mm</span></td>
<td ><select>
<option>a</option>
<option>b</option>
<option>c</option>
</select></td>
</tr>
<tr>
<td height="33" ><span class="Estilo39">nn</span></td>
<td ><select>
<option>Si</option>
<option>No</option>
</select></td>
</tr>
<tr>
<td height="30" ><span class="Estilo39">oo</span></td>
<td ><select>
<option>r</option>
<option>s</option>
</select></td>
</tr>
<tr>
<td height="29" ><span class="Estilo39">pp</span></td>
<td ><select>
<option>2p</option>
<option>f</option>
</select></td>
</tr>
</table>
</div>
<div align="center" id="prod5" style="width:80%; height:100%" class="tipostanque" >
<p></p>
<p class="Estilo41"><span class="Estilo40">Producto 5 </span></p>
<table width="87%" height="211" border="0" cellspacing="2">
<tr>
<td height="34" ><span class="Estilo39">qq</span></td>
<td ><select>
<option>1</option>
<option>2</option>
<option>3</option>
</select></td>
</tr>
<tr>
<td height="33" ><span class="Estilo39">rr</span></td>
<td ><select>
<option>Si</option>
<option>No</option>
</select></td>
</tr>
<tr>
<td height="30" ><span class="Estilo39">ss</span></td>
<td ><select>
<option>r</option>
<option>s</option>
</select></td>
</tr>
<tr>
<td height="29" ><span class="Estilo39">tt</span></td>
<td ><select>
<option>2p</option>
<option>f</option>
</select></td>
</tr>
</table>
</div> <p> </p> </td>
</tr>
<tr>
<td colspan="2" bordercolor="#990066"> </td>
</tr>
</table>
</div>
</form>
</body>
</html>