Foros del Web - Ver Mensaje Individual

i_e_s27 · #2 (**permalink**) 12/04/2008, 20:15

Lo que tu estas buscando suele llamarse Combos Anidados o Combos Dependientes.

Aca te paso el codigo que yo uso en mis proyectos:

Código:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo Combos Anidados/Dependientes</title>

<%
	Dim adoCon
	Set adoCon = Server.CreateObject ("ADODB.Connection")
	adoCon.open "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" & Server.MapPath("base_de_datos.mdb")

	Dim rsComboCategoria, rsComboSubcategoria
	Dim strSQLComboCategoria, strSQLComboSubcategoria
	
	Set rsComboCategoria = Server.CreateObject("ADODB.Recordset")
	Set rsComboSubcategoria = Server.CreateObject("ADODB.Recordset")
	
	strSQLComboCategoria = "SELECT * FROM tblcategorias"
	strSQLComboSubcategoria = "SELECT * FROM tblsubcategorias"
	
	rsComboCategoria.Open strSQLComboCategoria, adoCon, 3, 3
	rsComboSubcategoria.Open strSQLComboSubcategoria, adoCon, 3, 3
	
%>
<script language = "JavaScript">
function RellenarCombo(ComboPadre, ComboDependiente, IDSelected) {
  
  IDsSubcategorias = new Array();
  IDsSubcategorias = [<%
	Dim EsPrimero
	EsPrimero = True
	rsComboSubcategoria.MoveFirst
	For x = 1 to rsComboSubcategoria.RecordCount
		If EsPrimero = False Then Response.Write(",")
		Response.Write("'" & rsComboSubcategoria("id") & "'")
		rsComboSubcategoria.MoveNext
		EsPrimero = False
	Next 'x
	Response.Write("];")
%>
  
  NombresSubcategorias = new Array();
  NombresSubcategorias = [<%
	EsPrimero = True
	rsComboSubcategoria.MoveFirst
	For x = 1 to rsComboSubcategoria.RecordCount
		If EsPrimero = False Then Response.Write(",")
		Response.Write("'" & rsComboSubcategoria("nombre_subcategoria") & "'")
		rsComboSubcategoria.MoveNext
		EsPrimero = False
	Next 'x
	Response.Write("];")
%>
  
  AsociacionSubcategorias = new Array();
  AsociacionSubcategorias = [<%
	EsPrimero = True
	rsComboSubcategoria.MoveFirst
	For x = 1 to rsComboSubcategoria.RecordCount
		If EsPrimero = False Then Response.Write(",")
		Response.Write("'" & rsComboSubcategoria("categoria_asociada") & "'")
		rsComboSubcategoria.MoveNext
		EsPrimero = False
	Next 'x
	Response.Write("];")
%>
  
  var IDItemSeleccionado = ComboPadre.options[ComboPadre.selectedIndex].value;
  ComboDependiente.length = 0;
  for (var i in IDsSubcategorias) {
    if (AsociacionSubcategorias[i] == IDItemSeleccionado) {
      ComboDependiente.options[ComboDependiente.length] = new Option(NombresSubcategorias[i], IDsSubcategorias[i]);
	  if (IDsSubcategorias[i] == IDSelected) {
	    ComboDependiente.options[ComboDependiente.length - 1].defaultSelected = true;
	    ComboDependiente.options[ComboDependiente.length - 1].selected = true;
	  }
    }
  }
}
</script>

</head>

<body onLoad="RellenarCombo(document.forms['EjemploCombos'].categoria, document.forms['EjemploCombos'].subcategoria);">
      <form id="EjemploCombos" name="EjemploCombos" method="post" target="_self" accept-charset="UTF-8">
      <table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td width="97%" height="35"><label for="categoria">Categoria</label>
              <select name="categoria" id="categoria" style="width:180px" onChange="RellenarCombo(document.forms['EjemploCombos'].categoria, document.forms['EjemploCombos'].subcategoria);" accept-charset="UTF-8">
<%
          rsComboCategoria.MoveFirst
          For i = 1 to rsComboCategoria.RecordCount
              Response.Write("<option value=""" & rsComboCategoria("id") & """>" & rsComboCategoria("nombre_categoria") & "</option>")
              Response.Write(VbCrLf)
              rsComboCategoria.MoveNext
          Next 'i
%>
              </select></td>
          </tr>
          <tr>
            <td width="97%" height="35"><label for="subcategoria">Subcategoria</label>
              <select name="subcategoria" id="subcategoria" style="width:180px" accept-charset="UTF-8">
              </select></td>
          </tr>
      </table>
      </form>
</body>
</html>

Saludos!