Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » ASP » Cargar select dinamicamente con ajax

ASP - Cargar select dinamicamente con ajax

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Maria Figuera

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.

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Enrique
Val: 15
Ha mantenido su posición en ASP (en relación al último mes)
Gráfica de ASP

Cargar select dinamicamente con ajax

Publicado por Enrique (7 intervenciones) el 01/12/2017 23:18:11
Iuuu visual basic
Eso ya no se ocupa en el mundo real.
Debris intentarlo con c# y consumir WebServices
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar