Varios menus dropdown dependientes

samihalawa · #1 (**permalink**) 12/08/2012, 08:54

Hola.
Estoy haciendo un formulario en el que se da la opción de varios menús dependientes. Esto es, dependiendo de la opción que e ligas en uno de los dropdown (<select...) las opciones del otro dropdown varían. El problema es que lo estoy haciendo con dos parejas de dropdown en el mismo formulario. Con una funciona muy bien, pero con dos se interfieren y cuando eliges una, se deselecciona otra.... Problemas de esos.
He intentado cambiar todos los códigos y names de ambos pares para que no coincidan y no interfieran, pero lo siguen haciendo.
Aquí dejo el código

Código HTML:

<html>
<head>
<title>Buscador Prueba</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
function dropdownlist(listindex)
{

document.formname.subcategory.options.length = 0;
switch (listindex)
{

case "hog" :
document.formname.subcategory.options[0]=new Option("Select Sub-Category","");
document.formname.subcategory.options[1]=new Option("Toldos","hog1");
document.formname.subcategory.options[2]=new Option("Jardinerías","hog2");
document.formname.subcategory.options[3]=new Option("Muebles de Baño y Cocina","hog3");
document.formname.subcategory.options[4]=new Option("Aire acondicionado","hog4");
document.formname.subcategory.options[5]=new Option("API (504)","hog5");


break;

}
document.formname.subcategory2.options.length = 0;
switch (listindex)
{

case "hog2" :
document.formname.subcategory2.options[0]=new Option("Select Sub-Category","");
document.formname.subcategory2.options[1]=new Option("Toldos2","hog12");
document.formname.subcategory2.options[2]=new Option("Jardinerías2","hog22");
document.formname.subcategory2.options[3]=new Option("Muebles de Baño y Cocina2","hog32");
document.formname.subcategory2.options[4]=new Option("Aire acondicionado2","hog42");
document.formname.subcategory2.options[5]=new Option("API (504)2","hog52");

break;

}

return true;
}
</script>

</head>
<body style="background-color:#333">
<div style="text-align:center;">
  <div style="width:800px; margin-left:auto; margin-right:auto; background-color:#CFFFE6; padding:20px; ">
  <div style="width:auto; background-color:#093; height:40px; text-align:center; padding-top:5px; padding-bottom:5px; font-size: 36px;">Buscador de prueba</div>

<div style="width:auto; background-color:#CCC; padding-top:20px">
<form id="formname" name="formname" method="post" action="mostraralgunosdatos.php" >
<table width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="41%" align="right" valign="middle">Category :</td>
<td width="59%" align="left" valign="middle"><select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
<option value="">Select Category</option>
<option value="hog">servicios</option>

</select></td>
</tr>
<tr>
<td align="right" valign="middle">Sub Category :
</td>
<td align="left" valign="middle"><script type="text/javascript" language="JavaScript">
document.write('<select name="subcategory"><option value="">Select Sub-Category</option></select>')
</script>
<noscript><select name="subcategory" id="subcategory" >
<option value="">Select Sub-Category</option>
</select>
</noscript></td>
</tr>
</table>
DOS_______________

<table width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="41%" align="right" valign="middle">Category2 :</td>
<td width="59%" align="left" valign="middle"><select name="category2" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
<option value="">Select Category2</option>
<option value="hog2">servicios2</option>

</select></td>
</tr>
<tr>
<td align="right" valign="middle">Sub Category :
</td>
<td align="left" valign="middle"><script type="text/javascript" language="JavaScript">
document.write('<select name="subcategory2"><option value="">Select Sub-Category</option></select>')
</script>
<noscript><select name="subcategory2" id="subcategory" >
<option value="">Select Sub-Category</option>
</select>
</noscript></td>
</tr>
</table>
<input type="submit" value="OK">



</form> 

</div>
</div>
</div>
</body>
</html>

Se llamas category y subcategory los de la primera pareja y category2 y subcategory2 los de la segunda.
Esto está subido a internet, para que veáis el problema en directo.
Mil gracias.

P.D: "Ignorad lo de ver lista de datos. es un link normal"