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
Aqui el ajax: prueba.js
Y por ultimo la página donde se cargan los select resultado.asp
Espero haberme explicado y me puedan ayudar..
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
0