Hola que tal comunidad, antes que nada muchas gracias por tomarse la molestia de entrar a este post, soy un programador novato, y tengo una duda que quizas parezca muy .... extraña, pero espero y me puedan ayudar.
Lo que se necesita es un menu que dependiendo de la opcion que selecciones, vaya desplegando distintos selects con informacion ya precargada
visualicen algo asi como cuando se crea una cuenta de correo electronico y piden el pais, al ustedes seleccionar su pais, por ejemplo "Mexico", habra otro select donde vendran los estados pero ya solo de mexico, en este caso al seleccionar un estado por ejemplo "Jalisco" vendra debajo otro select con los municipios y asi consecutivamente...
La diferencia es que en mi caso cada select puede contener tres opciones que despliegan informacion
y cada opcion contiene subopciones
no se si me entiendan... pero dejo mi codigo y espero y me puedan ayudar o de menos decirme que estoy haciendo mal y por que ya no funciona a partir del primer select
saludos y gracias :3
<html>
<head>
<script language="JavaScript">
function addOpt(oCntrl, iPos, sTxt, sVal){
var selOpcion=new Option(sTxt, sVal);
eval(oCntrl.options[iPos]=selOpcion);
}
function cambia(oCntrl){
switch (document.frm.incidente.selectedIndex){
case 0:
break;
case 1:
addOpt(oCntrl, 0, "Elija una opcion", "#");
addOpt(oCntrl, 1, "Software", "#");
addOpt(oCntrl, 2, "Hardware", "#");
addOpt(oCntrl, 3, "Internet", "#");
break;
case 2:
addOpt(oCntrl, 0, "Elija una opcion", "#");
addOpt(oCntrl, 1, "Instalacion", "#");
addOpt(oCntrl, 2, "Reubicacion", "#");
addOpt(oCntrl, 3, "cambio", "#");
break;
case 3:
addOpt(oCntrl, 0, "Elija una opcion", "#");
addOpt(oCntrl, 1, "Office", "#");
addOpt(oCntrl, 2, "Adobe", "#");
addOpt(oCntrl, 3, "Windows", "#");
addOpt(oCntrl, 4, "Virus", "#");
break;
case 4:
addOpt(oCntrl, 0, "Elija una opcion", "#");
addOpt(oCntrl, 1, "Laptop", "#");
addOpt(oCntrl, 2, "Monitor", "#");
addOpt(oCntrl, 3, "Mouse", "#");
addOpt(oCntrl, 4, "Teclado", "#");
addOpt(oCntrl, 5, "Impresora", "#");
addOpt(oCntrl, 6, "CPU", "#");
break;
case 5:
addOpt(oCntrl, 0, "Elija una opcion", "#");
addOpt(oCntrl, 1, "Internet", "#");
break;
}
}
</script>
<script type="text/javascript">
function addOpt(oCntrl, iPos, sTxt, sVal){
var selOpcion=new Option(sTxt, sVal);
eval(oCntrl.options[iPos]=selOpcion);
}
function cambia(oCntrl){
switch (document.frm.requerimiento.selectedIndex)
{
case 1:
addOpt(oCntrl, 0, "Elija una opcion", "#");
addOpt(oCntrl, 1, "Antivirus", "#");
addOpt(oCntrl, 2, "Office", "#");
addOpt(oCntrl, 3, "Adobe", "#");
addOpt(oCntrl, 4, "Windows", "#");
break;
case 2:
addOpt(oCntrl, 0, "Elija una opcion", "#");
addOpt(oCntrl, 1, "Equipo", "#");
addOpt(oCntrl, 2, "Impresora", "#");
addOpt(oCntrl, 3, "Nodo", "#");
break;
case 3:
addOpt(oCntrl, 0, "Elija una opcion", "#");
addOpt(oCntrl, 1, "Equipo de computo", "#");
break;
}
</script>
</head>
<body>
<form name="frm">
<table border="1" width="482">
<tr>
<td width="25">
Tipo:
</td>
<td width="89">
<select name="incidente" onchange="cambia(document.frm.requerimiento)">
<option value="Mex">Elija una opcion</option>
<option value="Esp">Incidente</option>
<option value="Ven">Requerimiento</option>
</select>
</td>
</tr>
<tr>
<td width="44">
-
</td>
<td width="296">
<select name="requerimiento" onChange="location.href=this.form.requerimiento.op tions[this.form.requerimiento.selectedIndex].value">
<option value="0">Elija una opcion</option>
<option value="1">Instalacion/desinstalacion</option>
<option value="2">Reubicacion</option>
<option value="3">Cambio</option>
</select>
</td>
</tr>
<tr>
<td>
-
</td>
<td width="296">
<select name="software" onChange="cambia(document.frm.incidente)">
<option value="0">Elija una opcion</option>
<option value="1">Office</option>
<option value="2">Adobe</option>
<option value="3">Windows</option>
<option value="4">Virus</option>
</select>
</td>
</tr>
<td>Pieza anterior</td>
<td><input name="ant" type="text"></td>
<tr>
<td>Pieza actual</td>
<td><input name="act" type="text"></select></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Ir" onClick="location.href=this.form.ciudad.options[this.form.ciudad.selectedIndex].value"></td>
</tr>
</table>
</form>
</body>
</html>