Funcionamento: O combo de estados é carregado ao abrir a pagina, ao selecionar um estado o combo de cidades é carregado automaticamente com as cidades referente ao estado selecionado.
São 3 arquivos: o inicial (.asp), include (.js) e o arquivo de retorno do segundo combo (.asp)
O arquivo conexao.asp é uma função que conecta ao banco de dados (access).
<%
dim conexao
sub abre_conexao
Set Conexao = Server.CreateObject("ADODB.Connection")
Conexao.Open "DBQ=CAMINHO_DA_PASTA\NOME_DO_BANCO.mdb;Driver={Microsoft Access Driver (*.mdb)}"
end sub
sub fecha_conexao
Conexao.close
Set Conexao = nothing
end sub
%>
ajax_combo.asp
<!--#include file="conexao.asp"-->
<%
call abre_conexao
sql = "select id_estado, estado from estados order by estado"
set tab = conexao.execute(sql)
%>
<html>
<head>
<script src="seleciona_cidade.js"></script>
</head>
<title>Exemplo de Ajax</title>
<style type="text/css">
table
{
font-family: verdana;
font-size: 11px;
color: #000099;
font-weight: bold;
}
select
{
font-family: verdana;
font-size: 11px;
}
</style>
<body>
<table border="1" width="40%" cellspacing="0" cellpadding="5" bgcolor="#EAEBEF" bordercolorlight="#FFFFFF" bordercolordark="#E3E5EA">
<tr>
<td width="10%">Estado:</td>
<td width="30%"><select name="estados" onchange="MandaID(this.value)">
<option value="">Selecione</option>
<% while not tab.eof %>
<option value="<%= tab("id_estado") %>"><%= tab("estado") %></option>
<% tab.movenext
wend
%>
</select>
</td>
</tr>
<tr>
<td>Cidade:</td>
<td><div id="exibe_cidade"><select><option value="">Selecione um estado</option></select></div></td>
</tr>
</table>
<%
call fecha_conexao
set tab = nothing
%>
</body>
</html>
seleciona_cidade.js
var xmlHttp
function MandaID(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Este browser não suporta HTTP Request")
return
}
var url="seleciona_cidade.asp"
url=url+"?id_estado="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
//ENVIO POR GET
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
//ENVIO POR POST
//xmlHttp.open("POST",url,true)
//xmlHttp.send(url)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("exibe_cidade").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
seleciona_cidade.asp
<!--#include file="conexao.asp"-->
<%
Response.Charset = "ISO-8859-1"
id_estado = request.querystring("id_estado")
%>
<select name="cidades">
<% if id_estado = "" then %>
<option value="">Selecione um estado</option>
<% else
call abre_conexao
sql_cidade="SELECT id_cidade, cidade FROM CIDADES WHERE id_estado="& id_estado
set tab_cidade = conexao.execute(sql_cidade)
while not tab_cidade.eof
%>
<option value="<%= tab_cidade("id_cidade") %>"><%= tab_cidade("cidade") %></option>
<% tab_cidade.movenext
wend
call fecha_conexao
set tab_cidade = nothing
end if
%>
</select>
[editando]Algumas pessoas tem me perguntado como fazer com o POST, então editei o codigo seleciona_cidade.js com as duas opcoes (destaque em azul). Testei aqui e funcionou mas caso alguém tenha problema é só avisar[/editando]
Pergunta
.Andreia.
Combos de estados e cidades usando Ajax
Funcionamento: O combo de estados é carregado ao abrir a pagina, ao selecionar um estado o combo de cidades é carregado automaticamente com as cidades referente ao estado selecionado.
São 3 arquivos: o inicial (.asp), include (.js) e o arquivo de retorno do segundo combo (.asp)
O arquivo conexao.asp é uma função que conecta ao banco de dados (access).
-> Testado no IE 7/8 e FF 3
Download dos arquivos em: http://scriptbrasil.com.br/download/codigo/6824/
conexao.asp
<% dim conexao sub abre_conexao Set Conexao = Server.CreateObject("ADODB.Connection") Conexao.Open "DBQ=CAMINHO_DA_PASTA\NOME_DO_BANCO.mdb;Driver={Microsoft Access Driver (*.mdb)}" end sub sub fecha_conexao Conexao.close Set Conexao = nothing end sub %>ajax_combo.asp<!--#include file="conexao.asp"--> <% call abre_conexao sql = "select id_estado, estado from estados order by estado" set tab = conexao.execute(sql) %> <html> <head> <script src="seleciona_cidade.js"></script> </head> <title>Exemplo de Ajax</title> <style type="text/css"> table { font-family: verdana; font-size: 11px; color: #000099; font-weight: bold; } select { font-family: verdana; font-size: 11px; } </style> <body> <table border="1" width="40%" cellspacing="0" cellpadding="5" bgcolor="#EAEBEF" bordercolorlight="#FFFFFF" bordercolordark="#E3E5EA"> <tr> <td width="10%">Estado:</td> <td width="30%"><select name="estados" onchange="MandaID(this.value)"> <option value="">Selecione</option> <% while not tab.eof %> <option value="<%= tab("id_estado") %>"><%= tab("estado") %></option> <% tab.movenext wend %> </select> </td> </tr> <tr> <td>Cidade:</td> <td><div id="exibe_cidade"><select><option value="">Selecione um estado</option></select></div></td> </tr> </table> <% call fecha_conexao set tab = nothing %> </body> </html>seleciona_cidade.js seleciona_cidade.asp<!--#include file="conexao.asp"--> <% Response.Charset = "ISO-8859-1" id_estado = request.querystring("id_estado") %> <select name="cidades"> <% if id_estado = "" then %> <option value="">Selecione um estado</option> <% else call abre_conexao sql_cidade="SELECT id_cidade, cidade FROM CIDADES WHERE id_estado="& id_estado set tab_cidade = conexao.execute(sql_cidade) while not tab_cidade.eof %> <option value="<%= tab_cidade("id_cidade") %>"><%= tab_cidade("cidade") %></option> <% tab_cidade.movenext wend call fecha_conexao set tab_cidade = nothing end if %> </select>[editando]Algumas pessoas tem me perguntado como fazer com o POST, então editei o codigo seleciona_cidade.js com as duas opcoes (destaque em azul). Testei aqui e funcionou mas caso alguém tenha problema é só avisar[/editando]
Editado por .Andreia.Link para o comentário
Compartilhar em outros sites
17 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.