Cargar select dinamicamente con ajax
Publicado por Maria Figuera (1 intervención) el 26/10/2017 16:31:32
Buen dia.
Estoy haciendo unos select dependientes y necesito que al seleccionar una opcion del primer select las demas se carguen dinamicamente con ajax todos los select siguientes dependen del primer select. Estoy trabajando con HTML, SQL y AJAX pero es primera vez que trabajo con ajax y estoy un poco enredada.
La cuestion es asi El primer select es de Filial Segun la filial que seleccionen se tienen que llenar otros dos select El de Edificio y el de Estrato es decir los edificio y estratos segun la filial seleccionada los dos select dependen de filial.
Solo he logrado que depende de la filial se me carguen los edificios pero en vez de mostrarme los estratos en el select de estratos tambien se muestran los edificios
Esto es olo que tengo hasta ahora:
Primer archivo PruebaSelect.asp
En este archivo tengo 3 select uno es la filial que es el primer select dependiendo de lo que seleccionen en este se tienen que cargar los otros dos que serian edificio y estrato.
Segunda Página Prueba.js
Es el ajax donde realizo las clases que llamo desde la página anterior.en estos script es donde tengo las funciones para cargar los otros dos select el problema esta en que al yo seleccionar una opcion de filial se cargan edifio y estrato con los datos del select de edificio nada mas y quiero que se carguen los edificios que dependen de filial y los estratos que dependen de filial.
Y esta es la última página resultado.asp
Donde hago la carga de los select dinamicos.
Toda la ayuda que me puedan dar la recibire con gusto. Espero haberme explicado..
De antemano gracias.
Estoy haciendo unos select dependientes y necesito que al seleccionar una opcion del primer select las demas se carguen dinamicamente con ajax todos los select siguientes dependen del primer select. Estoy trabajando con HTML, SQL y AJAX pero es primera vez que trabajo con ajax y estoy un poco enredada.
La cuestion es asi El primer select es de Filial Segun la filial que seleccionen se tienen que llenar otros dos select El de Edificio y el de Estrato es decir los edificio y estratos segun la filial seleccionada los dos select dependen de filial.
Solo he logrado que depende de la filial se me carguen los edificios pero en vez de mostrarme los estratos en el select de estratos tambien se muestran los edificios
Esto es olo que tengo hasta ahora:
Primer archivo PruebaSelect.asp
En este archivo tengo 3 select uno es la filial que es el primer select dependiendo de lo que seleccionen en este se tienen que cargar los otros dos que serian edificio y estrato.
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=UsuarioServidor;PWD=Clave;Database=NombreBaseDeDato"
Conn.Open ConnStr
%>
<form class="registrar" method="GET" role="formpersonel" id="formpersonel" name="formpersonel" 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>
Segunda Página Prueba.js
Es el ajax donde realizo las clases que llamo desde la página anterior.en estos script es donde tengo las funciones para cargar los otros dos select el problema esta en que al yo seleccionar una opcion de filial se cargan edifio y estrato con los datos del select de edificio nada mas y quiero que se carguen los edificios que dependen de filial y los estratos que dependen de filial.
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 esta es la última página resultado.asp
Donde hago la carga de los select dinamicos.
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
<%
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")
Conn.Open("DRIVER=SQL Server;SERVER=DireccionServidor;UID=UsuarioServidor;PWD=ClaveConexion;Database=NombreBaseDeDatos")
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%>
Toda la ayuda que me puedan dar la recibire con gusto. Espero haberme explicado..
De antemano gracias.
Valora esta pregunta
0