Mira, yo justo tambien estoy trabajando con combos anidados, o combos dependientes, como quieras decirle, asi que aprobecho para mostrarte el codigo que tengo yo, quizas te pueda servir...
Solo tengo un pequeño inconveniente con el que estoy... yo no se programar en JavaScript, y no se como llamar en el "body onload" a mi funcion que llena el combo anidado o dependiente...
Este es el codigo en ASP:
Código:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%Response.Buffer = True%>
<HTML>
<HEAD><TITLE>Combo Dependiente</TITLE></HEAD>
<body>
<%
Const adOpenForwardOnly = 0 'Es el cursor por defecto y nos permite recorrer el Recordset en forma secuencial.
Const adOpenKeySet = 1 'Permite movernos hacia delante y atrás. Permite observar las modificaciones en los datos del Recordset , no así si existen ingresos de nuevos registros.
Const adOpenDynamic = 2 'Permite movernos en cualquier sentido, viendo cualquier modificación, ingreso o eliminación de datos del Recordset.
Const adOpenStatic = 3 'Permite movernos en cualquier sentido, pero no se verá ningún cambio ocurrido en la tabla.
Const adLockReadOnly = 1 'Es el cerrojo por defecto y no permite modificar los registros de la tabla.
Const adLockPessimistic = 2 'Una vez que alguien abre la tabla, ésta queda bloqueada para los demás usuarios. Con este modo se asegura la integridad de los datos.
Const adLockOptimistic = 3 'La tabla sólo será bloqueada a los demás usuarios mientras se ejecute una operación Update. De esta forma la tabla se bloqueará durante mucho menos tiempo que con el método anterior.
Const adBatchOptimistic = 4 'Los registros serán actualizados en modo batch.
Dim adoCon
Set adoCon = Server.CreateObject ("ADODB.Connection")
adoCon.open "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" & Server.MapPath("MISITIO/dbgeneral.mdb")
Set rsCombo1 = Server.CreateObject("ADODB.Recordset")
Set rsCombo2 = Server.CreateObject("ADODB.Recordset")
strSQLCombo1 = "SELECT * FROM tblcategorias"
strSQLCombo2 = "SELECT * FROM tblsubcategorias"
rsCombo1.Open strSQLCombo1, adoCon, adOpenStatic, adLockOptimistic
rsCombo2.Open strSQLCombo2, adoCon, adOpenStatic, adLockOptimistic
%>
<script language="javascript">
function Combos(x) {
ItDepend=document.getElementById('CombDependiente');
if(!ItDepend){return;}
var mitems=new Array();
mitems['Categoria']=['Subcategoria'];
<%
For i = 1 to rsCombo1.RecordCount
Response.Write(" mitems['" & rsCombo1("nombre_categoria") & "']=[")
rsCombo2.MoveFirst
NoSeEncontroRegistro = True
EsPrimero = True
For x = 1 to rsCombo2.RecordCount
If rsCombo2("categoria_asociada") = rsCombo1("id") Then
NoSeEncontroRegistro = False
If EsPrimero = False Then Response.Write(",")
Response.Write("'" & rsCombo2("nombre_subcategoria") & "'")
EsPrimero = False
End If
rsCombo2.MoveNext
Next 'x
If NoSeEncontroRegistro = True Then Response.Write("''")
Response.Write("];")
rsCombo1.MoveNext
Response.Write(VbCrLf)
Next 'i
%>
ItDepend.options.length=0;
ItActual=mitems[x.options[x.selectedIndex].value];
if(!ItActual){return;}
ItDepend.options.length=ItActual.length;
for(var i=0;i<ItActual.length;i++) {
ItDepend.options[i].text=ItActual[i];
ItDepend.options[i].value=ItActual[i];
}
}
</script>
<form id="AgregarProducto" name="AgregarProducto" method="post" action="">
<label for="or">Categoria:</label>
<select name="or" id="or" onChange="Combos(this)">
<%
rsCombo1.MoveFirst
For i = 1 to rsCombo1.RecordCount
Response.Write(" <option value=""" & rsCombo1("nombre_categoria") & """>" & rsCombo1("nombre_categoria") & "</option>")
Response.Write(VbCrLf)
rsCombo1.MoveNext
Next 'i
%>
</select>
<label for="CombDependiente">Subcategoria:</label>
<select name="CombDependiente" id="CombDependiente"></select>
<input type="submit" value="Ir" />
</form>
</body>
</html>
Y este es el codigo HTML que genera,
apreciar que es un codigo muy limpio y ordenado:
Código HTML:
<HTML>
<HEAD><TITLE>Combo Dependiente</TITLE></HEAD>
<body>
<script language="javascript">
function Combos(x) {
ItDepend=document.getElementById('CombDependiente');
if(!ItDepend){return;}
var mitems=new Array();
mitems['Categoria']=['Subcategoria'];
mitems['Cartuchos y Toners']=['HP','Lexmark','Canon'];
mitems['Discos Ríg y Remov']=[''];
mitems['Grab/Lect de CD y DVD']=[''];
mitems['Memorias']=[''];
mitems['Pen Drives']=[''];
mitems['Placas de Sonido']=[''];
mitems['Procesadores']=['AMD','Intel'];
mitems['Scanners']=[''];
mitems['Software y Programas']=[''];
mitems['Alimentación']=[''];
mitems['CDs y DVDs Vírg']=[''];
mitems['Discos Rígidos']=[''];
mitems['Gabinetes y Accesorios']=[''];
mitems['Libros y Manuales']=[''];
mitems['Modems']=[''];
mitems['Motherboards']=[''];
mitems['Notebooks']=['Toshiba'];
mitems['Papeles y Resmas']=[''];
mitems['Perif y Accesorios']=[''];
mitems['Placas de Video y Editora']=['Nvidia','ATI'];
mitems['Impresoras']=[''];
ItDepend.options.length=0;
ItActual=mitems[x.options[x.selectedIndex].value];
if(!ItActual){return;}
ItDepend.options.length=ItActual.length;
for(var i=0;i<ItActual.length;i++) {
ItDepend.options[i].text=ItActual[i];
ItDepend.options[i].value=ItActual[i];
}
}
</script>
<form id="AgregarProducto" name="AgregarProducto" method="post" action="">
<label for="or">Categoria:</label>
<select name="or" id="or" onChange="Combos(this)">
<option value="Cartuchos y Toners">Cartuchos y Toners</option>
<option value="Discos Ríg y Remov">Discos Ríg y Remov</option>
<option value="Grab/Lect de CD y DVD">Grab/Lect de CD y DVD</option>
<option value="Memorias">Memorias</option>
<option value="Pen Drives">Pen Drives</option>
<option value="Placas de Sonido">Placas de Sonido</option>
<option value="Procesadores">Procesadores</option>
<option value="Scanners">Scanners</option>
<option value="Software y Programas">Software y Programas</option>
<option value="Alimentación">Alimentación</option>
<option value="CDs y DVDs Vírg">CDs y DVDs Vírg</option>
<option value="Discos Rígidos">Discos Rígidos</option>
<option value="Gabinetes y Accesorios">Gabinetes y Accesorios</option>
<option value="Libros y Manuales">Libros y Manuales</option>
<option value="Modems">Modems</option>
<option value="Motherboards">Motherboards</option>
<option value="Notebooks">Notebooks</option>
<option value="Papeles y Resmas">Papeles y Resmas</option>
<option value="Perif y Accesorios">Perif y Accesorios</option>
<option value="Placas de Video y Editora">Placas de Video y Editora</option>
<option value="Impresoras">Impresoras</option>
</select>
<label for="CombDependiente">Subcategoria:</label>
<select name="CombDependiente" id="CombDependiente"></select>
<input type="submit" value="Ir" />
</form>
</body>
</html> Notese que algunos items estan vacios, se puede poner que diga Vacio en vez de dejarlo en blanco. Por ahora es solo una prueba, cuando la pagina este on line tendra mas informacion la base de datos.
Solo me queda lo que dije mas arriba, lo de body onload, si alguien sabe como, por favor me lo dice? Sino posteo en el foro de JavaScript.
Saludos!!