Ver Mensaje Individual
  #8 (permalink)  
Antiguo 05/02/2007, 10:22
Avatar de luisvasquez
luisvasquez
 
Fecha de Ingreso: diciembre-2003
Ubicación: Venezuela
Mensajes: 879
Antigüedad: 20 años, 11 meses
Puntos: 6
Re: combobox dependientes con ajax.

Hola Amigos,

Este código ASP es una mezcla de lo que tradujo Al Zuwaga y algo que encontré no se donde, y TEORICAMENTE funciona para multiples combos (3 en este caso)

select_dependientes_3_niveles.asp

Código:
<%
sub generaselect()
     'ABRO LA B/D
      cst = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("/db/db_.mdb")
	Set oConn = Server.CreateObject("ADODB.Connection")
	oConn.open cst
	
	Set Rs = Server.CreateObject("ADODB.Recordset")
	 sql = "select * from paises_registro order by nombre_pais asc" 
	      set rs = cnn.execute(sql)
	
       
	' Voy imprimiendo el primer select compuesto por los paises
	Response.Write "<select class=""combo"" id=""select_1"" name=""paises"" onChange=""cargaContenido(2)"">"
	Response.Write("<option value='0'>Elige  </option>")
	While not Rs.EOF
		Response.Write "<option value=""" & rs("codigo_pais") & """>" & rs("nombre_pais") & "</option>"
		Rs.MoveNext
	Wend
	Response.Write "</select>"
	
End sub
%>



<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(selectACargar)
{
	// Recibo el número correspondiente al combo que se debe llenar de datos
	var selectAnterior=selectACargar-1; // Obtengo el número del combo que activó el evento onChange
	// Extraigo el valor del combo que se ha cambiado
	var valor=document.getElementById("select_"+selectAnterior).options[document.getElementById("select_"+selectAnterior).selectedIndex].value;
	var elemento;
	
	if(valor!=0)
	{
		ajax=nuevoAjax();
		// Envio al servidor el valor seleccionado y el combo al cual se le deben poner los datos
		ajax.open("GET", "select_dependientes_3_niveles_proceso.asp?seleccionado="+valor+"&select_a_cargar="+selectACargar, true);
		ajax.onreadystatechange=function() 
		{ 
			if (ajax.readyState==1)
			{
				// Mientras carga elimino la opcion "Elige" y pongo una que dice "Cargando"
				elemento=document.getElementById("select_"+selectACargar);
				elemento.length=0;
				var opcionCargando=document.createElement("option"); opcionCargando.value=0; opcionCargando.innerHTML="Cargando...";
				elemento.appendChild(opcionCargando); elemento.disabled=true;	
			}
			if (ajax.readyState==4)
			{
				// Coloco en la fila contenedora los datos que recivo del servidor
				document.getElementById("fila_"+selectACargar).innerHTML=ajax.responseText;
			} 
		}
		ajax.send(null);
	}
	
	/* Colocamos mediante los whiles los selects en "Selecciona opción..." cuando el select anterior
	ha quedado en estado "Elige" */
	var x=1, y=null;
	while(x<=2)
	{
		valor=document.getElementById("select_"+x).options[document.getElementById("select_"+x).selectedIndex].value;
		if(valor==0)
		{
			while(x<=2) 
			{
				y=x+1;
				elemento=document.getElementById("select_"+y);
				elemento.length=0;
				var opcionSelecciona=document.createElement("option"); opcionSelecciona.value=0; opcionSelecciona.innerHTML="Selecciona opci&oacute;n...";
				elemento.appendChild(opcionSelecciona); elemento.disabled=true;
				x++;
			}
		}
		x++;
	}
	
}
</script>

<style type="text/css"> 
.punteado 
{ 
	border-style:dotted; 
	border-color:#000000; 
	background-color:#EAEAEA;
	font-family:Verdana; 
	font-size:10px; 
	text-align:center;
}

.combo
{
	font-family:Verdana; 
	font-size:10px; 
	border-color:#CCCCCC;
}
</style>
</head>

<body>
<center>
<table border="1" width="600px" style="border-style:none;">
  <tr>
    <td id="fila_1" width="200px" class="punteado"><% generaSelect() %></td>

	<td id="fila_2" width="200px" class="punteado">
		<select class="combo" disabled="disabled" id="select_2" name="select_2">
		<option id="valor_defecto" value="0">Selecciona opci&oacute;n...</option>
		</select>
	</td>

	<td id="fila_3" width="200px" class="punteado">
		<select class="combo" disabled="disabled" id="select_3" name="select_3">
		<option id="valor_defecto" value="0">Selecciona opci&oacute;n...</option>
		</select>
	</td>
  </tr>
</table>
</center>
</body>
</html>


select_dependientes_3_niveles_proceso.asp
Código:
<!--#include file="includes/base_datos.asp"-->
<%

cod_a_buscar    = Request.QueryString("seleccionado")
select_a_cargar = request.QueryString("select_a_cargar")


call abrir_bd()

select case select_a_cargar
case 2 ' busco el estado
   sql = "select * from estado_registro where codigo_pais ="&cod_a_buscar&" order by nombre_estado asc" 
   set rs = cnn.execute(sql)
 
   response.Write "<select class='combo' id='select_"&select_a_Cargar&"' name='select_"&select_a_Cargar&"' onChange='cargaContenido(3)'>"		
   response.Write "<option value='0'>Elige</option>"
   While Not Rs.EOF
	 ' Imprimo las opciones del select
	   response.Write "<option value=""" & Rs("codigo_estado") & """>" & Server.HtmlEncode(Rs("nombre_estado")) & "</option>"
	   Rs.MoveNext
   Wend
   response.Write "</select>"

case 3 'busco las poblaciones del estado
   sql = "select * from poblaciones where codigo_estado ="&cod_a_buscar&" order by nombre_poblacion asc" 
   set rs = cnn.execute(sql)
 
   response.Write "<select class='combo' id='select_"&select_a_Cargar&"' name='select_"&select_a_Cargar&"'>"
   response.Write "<option value='0'>Elige</option>"
   While Not Rs.EOF
	' Imprimo las opciones del select
	 response.Write "<option value=""" & Rs("codigo_poblacion") & """>" & Server.HtmlEncode(Rs("nombre_poblacion")) & "</option>"
	 Rs.MoveNext
   Wend
  response.Write "</select>"
end select	
	
%>

Los combos dependientes funcionan perfectos aca, el problema es que cuando trato de insertar en la base de datos los valores select_2 y select_3 a través del request.form, vienen vacíos...se supone que alli deberian estar el estado y la población...

Alguna idea?

Saludos y gracias,
Luis