3 listas dependientes

jahman · #1 (**permalink**) 01/09/2007, 12:26

hola como estan, logre hacer dos listas dependientes pero lamentablemente la 3 lista no carga, les explico en realidad lo que necesito son una seguidilla de lista que se van a ir armando segun el arbol que posean para esto se necesitan ir recibiendo las opciones anteriores para ir consultando y generando las demas listas pero creo que no estoy enviando bien als variables....
espero que me puedan ayudar.Gracias...

vd.asp

Código HTML:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!--#include file="../Connections/acceso.asp" -->
<%
If (Request.Form("FirstOp") <> "") Then 
  FirstOp = Request.Form("FirstOp")
End If

If (Request.Form("SecondOp") <> "") Then 
  SecondOp = Request.Form("SecondOp")
End If

If (Request.Form("ThirdOp") <> "") Then 
  ThirdOp = Request.Form("ThirdOp")
End If

%>
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
</head>
<script language="javascript" type="text/javascript"> 
function nuevoAjax() { 
   /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por 
   lo que se puede copiar tal como esta aqui */ 
   var xmlhttp=false; 
   try    { 
      // Creacion del objeto AJAX para navegadores no IE 
      xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); 
   } 
   catch(e)    { 
      try       { 
         // Creacion del objet AJAX para IE 
         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
      catch(E) { xmlhttp=false; } 
   } 
   if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp=new XMLHttpRequest(); } 
   return xmlhttp; 
} 

function cargaContenido() { 
   	var valor=document.getElementById("select_0").options[document.getElementById("select_0").selectedIndex].value; 
   		if(valor==0) {      // Si el usuario eligio la opcion "Elige", no voy al servidor y pongo todo por defecto 
      		combo=document.getElementById("select_1"); 
      		combo.length=0; 
      		var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="-- Select --"; 
      		combo.appendChild(nuevaOpcion);   combo.disabled=true; 
   		} 
   		else { 
      		ajax=nuevoAjax(); 
      		ajax.open("GET", "select_ajax.asp?FirstOp="+valor, true); 
      		ajax.onreadystatechange=function()	{ 
         	if (ajax.readyState==1)  { 
            // Mientras carga elimino la opcion pongo una que dice "Cargando" 
            	combo=document.getElementById("select_1"); 
            	combo.length=0; 
            	var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando..."; 
            	combo.appendChild(nuevaOpcion); combo.disabled=true;    
         	} 
         	if (ajax.readyState==4) { 
            	document.getElementById("fila_2").innerHTML=ajax.responseText; 
         	} 
      	} 
      	ajax.send(null); 
   	} 	
} 


function cargaContenidoI() { 
   	var valorI=document.getElementById("select_1").options[document.getElementById("select_1").selectedIndex].value; 
   		if(valorI==0) {      // Si el usuario eligio la opcion "Elige", no voy al servidor y pongo todo por defecto 
      		comboI=document.getElementById("select_2"); 
      		comboI.length=0; 
      		var nuevaOpcionI=document.createElement("option"); nuevaOpcionI.value=0; nuevaOpcionI.innerHTML="-- Select --"; 
      		comboI.appendChild(nuevaOpcionI);   comboI.disabled=true; 
   		} 
   		else { 
      		ajaxI=nuevoAjax(); 
      		ajaxI.open("GET", "ThirdOp.asp?FirstOp="+valor+"&SecondOp="+valorI, true); 
      		ajaxI.onreadystatechange=function() 
      		{ 
         	if (ajaxI.readyState==1)  { 
            // Mientras carga elimino la opcion pongo una que dice "Cargando" 
            	comboI=document.getElementById("select_2"); 
            	comboI.length=0; 
            	var nuevaOpcionI=document.createElement("option"); nuevaOpcionI.value=0; nuevaOpcionI.innerHTML="Cargando..."; 
            	comboI.appendChild(nuevaOpcionI); comboI.disabled=true;    
         	} 
         	if (ajaxI.readyState==4) { 
            	document.getElementById("fila_3").innerHTML=ajaxI.responseText; 
         	} 
      	} 
      	ajaxI.send(null); 
   	} 
}
</script> 
</head> 

<br> 
<input type="text" name="a" value="<%=FirstOp%>"> 
<input type="text" name="a" value="<%=SecondOp%>"> 
<form name="aqui" method="POST" action="VD.asp"> 
<table width="400" style="border-style:none;"> 
  	<tr> 
    	<td id="fila_1" width="50%">
		<select name="FirstOp"  id="select_0"  onChange="cargaContenido()">
			<option>-- Select --</option>
			<%
			Set SelectI = Server.CreateObject("ADODB.Recordset")
			SelectI.ActiveConnection = MM_acceso_STRING
			SelectI.Source = "SELECT DISTINCT FirstOp FROM TreeDatosFCR_index order by FirstOp "
			SelectI.CursorType = 1
			SelectI.CursorLocation = 2
			SelectI.LockType = 1
			SelectI.Open()
			while NOT SelectI.EOF %>
				<option value="<%=SelectI.Fields("FirstOp")%>"><%=SelectI.Fields("FirstOp")%></option>
			<% SelectI.movenext()
			Wend%>
		</select>
		</td>
	</tr>
	<tr>
   		<td id="fila_2" width="50%">
     	<select disabled="disabled" id="select_1" name="SecondOp" onChange="cargaContenidoI()">
       		<option id="valor_defecto" value="0">-- Select --</option>
     	</select>
		</td> 
  	</tr>
	<tr>
   		<td id="fila_3" width="50%"> 
     	<select disabled="disabled" id="select_2" name="ThirdOp">
       		<option id="valor_defectoI" value="0">-- Select --</option>
     	</select>
		</td> 
  	</tr> 
</table> 
<input type="submit" name="algo" value="Enviar"> 
</form>

</body>
</html>

segundo_select.asp

Código HTML:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!--#include file="../Connections/acceso.asp" -->
<%
If (Request.QueryString("FirstOp") <> "") Then 
  FirstOp = Request.QueryString("FirstOp")
End If

%>
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
</head>
<body>
<%
Set SelectII = Server.CreateObject("ADODB.Recordset")
SelectII.ActiveConnection = MM_acceso_STRING
SelectII.Source="SELECT DISTINCT SecondOp FROM TreeDatosFCR_index WHERe FirstOp ='"& FirstOp &"' ORDER BY SecondOp"
SelectII.CursorType = 1
SelectII.CursorLocation = 2
SelectII.LockType = 1
SelectII.Open()
%>
   	<select id="select_1" name="SecondOp">
    	<% while NOT SelectII.EOF %>
     	<option value="<%=SelectII.Fields("SecondOp")%>"><%=SelectII.Fields("SecondOp")%></option>
	 	<% SelectII.movenext()
	 	wend %>
	</select>

</body>
</html>

tercer_select.asp

Código HTML:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!--#include file="../Connections/acceso.asp" -->
<%
If (Request.QueryString("FirstOp") <> "") Then 
  FirstOp = Request.QueryString("FirstOp")
End If

If (Request.QueryString("SecondOp") <> "") Then 
  SecondOp = Request.QueryString("SecondOp")
End If

%>
<html>
<head>
<title>Documento sin t&iacute;tulo</title>

</head>

<body>
<%
Set SelectIII = Server.CreateObject("ADODB.Recordset")
SelectIII.ActiveConnection = MM_acceso_STRING
SelectIII.Source = "SELECT DISTINCT ThirdOp FROM TreeDatosFCR_index WHERE FirstOp = '"& FirstOp &"' and  SecondOp = '"& SecondOp &"' ORDER BY ThirdOp"
SelectIII.CursorType = 1
SelectIII.CursorLocation = 2
SelectIII.LockType = 1
SelectIII.Open()
%>
   	<select id="select_2" name="ThirdOp">
    	<% while NOT SelectIII.EOF %>
     	<option value="<%=SelectIII.Fields("ThirdOp")%>"><%=SelectIII.Fields("ThirdOp")%></option>
	 	<% SelectIII.movenext()
	 	wend %>
	</select>
</body>
</html>

jahman · #2 (**permalink**) 03/09/2007, 11:47

es posible que alguien me pueda decir en que me equivoque xq por mas que busco no se porque no me muestra la 3 lista. Gracias.

jahman · #3 (**permalink**) 03/09/2007, 14:16

Bueno despues da tantos intentos Por fin logre que me tirara el select de la 3 lista... gracias a los que aportaron con sus ideas (plop!!)
en fin era lo que sospechaba no enviaba o mejor dicho no recogia bien la variable.

jahman · #4 (**permalink**) 03/09/2007, 16:23

consulta como utilizo 5 listas dependientes me surgio un pequeño inconveniete cuando completo toda la lista y luego quiero cambiar las opciones desde la segunda lista y esta no llega mas que ala 3 las otras conservan el valor elegido anteriormente como se puede hacer para que las demas queden con valor 0
ojala que alguien me responda. Gracias.

zyon · #5 (**permalink**) 03/09/2007, 18:25

que tal, io no entiendo ASP para nada jeje, pero tengo la idea de que si vuelves a elegir el valor de una lista, al momento de llamar la funcion que te cargue la sigueinte losta dependiente puedes hacer con js alguna funcioncilla que te elimine el contenido de las demas listas dependientes y te las deje en blanco, por hay hechate una navegadita en google y busca algo como "vaciar select" o algo asi...no se si entendi lo que quieres o si te ayuda lo que digo pero suerte! hay nos cuentas!

jahman · #6 (**permalink**) 04/09/2007, 08:36

Gracias man por su respuesta aunque no lo crea me guio un poco...
la idea era muy simple aunque un poco complicado par ami que recien estoy viendo esto del ajax....
coloco el codigo para dejar en blanco los demas select y asi armar el arbol o la seleccion nuevamente

Código HTML:

ajaxG=nuevoAjax();
ajaxG.open("GET", "FifthOp.asp", true);
ajaxG.onreadystatechange=function()	{ 
       if (ajaxG.readyState==4) { 
            document.getElementById("fila_5").innerHTML=ajaxG.responseText; 
       }			
}
ajaxG.send(null);

Gracias.

zyon · #7 (**permalink**) 04/09/2007, 18:00

no entiendo bien, en que parte haces que los select se limpien? y no crees que te hace falta la validacion de ajaxG.status==200? talvez recivaz un error en la peticion y eso te pondria en tu campo fila_5...

jahman · #8 (**permalink**) 04/09/2007, 19:17

Bueno basicamente la idea era cuando se gatillara el evento del primer select de ahi vaciar todos los demas select es por eso que decidi dejarlo o mas bien no enviar parametros, ademas debo agregar que recien estoy empezando a ver ajax asi que fue lo mejor que pude hacer

Código HTML:

ajaxG=nuevoAjax();
ajaxG.open("GET", "FifthOp.asp", true);
ajaxG.onreadystatechange=function()	{ 
       if (ajaxG.readyState==4) { 
            document.getElementById("fila_5").innerHTML=ajaxG.responseText; 
       }			
}
ajaxG.send(null);