Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » AJAX » Como cargar varios select que dependen solo de uno con ajax

AJAX - Como cargar varios select que dependen solo de uno con ajax

Volver
Nuevo Tema
<<>>
 
Vista:

Como cargar varios select que dependen solo de uno con ajax

Publicado por Maria Figuera (1 intervención) el 27/10/2017 14:03:58
Buen dia.
Estoy tratando de llenar 3 select dinamicamente con ajax y se me ha complicado un poco!
El primer select es de filial segun lo que seleccionen en este los demas deberan cargarse
ejemplo:
Select:Filial Opcion: Empresa --> Select:Edificio Opcion: Sede Miranda --> Select:Estrato Opcion:Empleado

Esto es lo que deberia de hacer segun la filial que seleccionen se carguen los edificios que dependen de esa filial y los estratos que dependen de esa filial.

Hasta ahora solo he logrado deplegar la filial y los edificios que dependen de esa filial mas no he logrado desplegar los estratos en el select de estrato se me desplegan tambn los edificio.

Necesito que al seleccionar la filial se carguen los edificios y tambn los estratos.

Aqui mi codigo.

Primera página PruebaSelect.asp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Prueba de select</title>
</head>
<body>
<%
dim ConnStr 'Conexion a bd
dim Conn 'Abriendo la conexion a la bd
 
Set Conn = Server.CreateObject("ADODB.Connection")
ConnStr="DRIVER=SQL Server;SERVER=DireccionServidor;UID=UsuarioDeConexion;PWD=ClaveDeConexion;Database=NombreDeLaBaseDeDatos"
Conn.Open ConnStr
 
%>
 
<form class="registrar" method="GET" role="formpersonel" id="formpersonel" name="formpersonel" action="registrar.asp" ENCTYPE="text/plain">
<label class="center inputText"> Filial:  </label>
        <select name="tx_Filial" id="tx_Filial" onChange="ajaxfilial();" required>
          <option> </option>
            <%set rs_filial=createobject("ADODB.Recordset")
            sql_filial="select * from SICC_FILIAL order by tx_Filial asc"
            rs_filial.open sql_filial,conn
            do while not rs_filial.eof
            tx_filial = rs_filial("tx_Filial")
            co_Filial = rs_Filial("co_Filial")
            f = request.form("tx_Filial")
 
            if tx_Filial = "" then
            response.write ""
            'if r = descripcion then
            'end if
            else
           response.write "<option value="&co_Filial&" >"&tx_Filial&" </option>"
          end if
        'Esto hace el recorrido y cierra la conexion a la base de datos
    rs_filial.movenext

  loop

%>

</select>



      <label class="center"> Edificio: </label>

          <select name="NumCol4" id="tx_Edificio" class="form-control inputregis2 show-tick" onChange="ajaxedificio();" required>

            <option value="" selected>---</option> 

          </select>



      <label class="center"> Estrato: </label>

          <select name="NumCol7" id="tx_Estrato" class="form-control inputregis2 show-tick" onChange="ajaxestrato();" required>

            <option value="" selected>---</option> 

          </select>



<script type="text/JavaScript"  src="../recursos/js/prueba.js"></script>

</body>

</html>

Aqui el ajax: prueba.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
var READY_STATE_COMPLETE = 4;
var OK = 200;
var ajax = null;
 
function objetoAJAX(){
	if (window.XMLHttpRequest){
		return new XMLHttpRequest();
	}
	else if (window.ActiveXObject){
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
}
 
function enviarDatos(){
		if (ajax.readyState == READY_STATE_COMPLETE){
		if (ajax.status == OK){
 
		if (ajax.responseText.indexOf("primera")>-1 & ajax.responseText.indexOf("segunda")>-1){
			document.querySelector("#tx_Edificio").innerHTML = ajax.responseText;
			document.querySelector("#tx_Estrato").innerHTML = ajax.responseText;
		  }
		}
			else{
			alert("El Servidor  No contestó\nError"+ajax.status+": "+ajax.statusText);
	  }
 
    }
}
 
function ejecutarAJAX(datos){
	ajax = objetoAJAX();
	ajax.onreadystatechange =enviarDatos;// onreadystatechange detecta los cambios de estado

	ajax.open("POST","resultado.asp");
	ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	ajax.send(datos);
}
 
function ajaxfilial(evento){
	var f =  formpersonel.tx_Filial.options[formpersonel.tx_Filial.selectedIndex].value;
	datos = "";
	datos += "id1="+f;
	alert(f);
	ejecutarAJAX(datos);
}
 
function ajaxedificio(evento){
	var e = formpersonel.tx_Edificio.options[formpersonel.tx_Edificio.selectedIndex].value;
	datos = "";
	datos += "id2="+e;
	alert(e);
	ejecutarAJAX(datos);
}
 
function ajaxestrato(evento){
	var es = formpersonel.tx_Estrato.options[formpersonel.tx_Estrato.selectedIndex].value;
	datos = "";
	datos += "id3="+es;
	alert(es);
	ejecutarAJAX(datos);
}
 
function alCargarDocumento(){
}
window.addEventListener("load",alCargarDocumento);

Y por ultimo la página donde se cargan los select resultado.asp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<%
id1 = request.Form("id1")
id2 = request.Form("id2")
id3 = request.Form("id3")
%>
<%if id1 <> "" then%>
<option value=""   selected>---</option>
<%
 
Set Conn = Server.CreateObject("ADODB.Connection")
ConnStr="DRIVER=SQL Server;SERVER=DireccionServidor;UID=UsuarioDeConexion;PWD=ClaveDeConexion;Database=NombreDeLaBaseDeDatos"
Conn.Open ConnStr
 
sql_edificio="select * from SICC_EDIFICIO where co_Filial=('"&id1&"')  order by tx_Edificio asc"
set rs_edificio=createobject("ADODB.Recordset")
rs_edificio.open sql_edificio,conn
do while not rs_edificio.eof
 
co_Edificio = rs_edificio("co_Edificio")
co_Filial = rs_edificio("co_Filial")
tx_Edificio = rs_edificio("tx_Edificio")
e = request.QueryString("tx_Edificio")
 
if e <> "" then
 
	if e = tx_Edificio then
	end if
else
 
response.write "<input type='hidden' name='primera'/>"
response.write "<option value="&co_Edificio&" >"&tx_Edificio&" </option>"
 
end if
rs_edificio.movenext
	loop
%>
 
<%
sql_estrato="select * from SICC_ESTRATO where co_Filial=('"&id1&"')  order by tx_Estrato asc"
set rs_estrato=createobject("ADODB.Recordset")
rs_estrato.open sql_estrato,conn
do while not rs_estrato.eof
 
co_Estrato = rs_estrato("co_Estrato")
co_Filial = rs_estrato("co_Filial")
tx_Estrato = rs_estrato("tx_Estrato")
es = request.QueryString("tx_Estrato")
 
if es <> "" then
 
	if es = tx_Estrato then
	end if
else
 
response.write "<input type='hidden' name='segunda'/>"
response.write "<option value="&co_Estrato&" >"&tx_Estrato&" </option>"
 
end if
rs_estrato.movenext
	loop
%>
<%end if%>

Espero haberme explicado y me puedan ayudar..
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder