Ajax: Filtrando combo cidades pelo estado

0

Posted on : 19-07-2009 | By : Paulo H Oliveira | In : ASP, Ajax
// Combo das cidades
<%
set rsCids = Server.CreateObject(“adodb.recordset”)
rsCids.open “SELECT CATCODIGO, CATDESCRICAO FROM CATEGORIAS WHERE CATTIPO=’C’ ORDER BY CATDESCRICAO”, conn
%>
<select name=”scidades” id=”scidades” onchange=”grupobairros();”>
<option value=”">Escolha a Cidade</option>
<% while not rsCids.Eof %>
<option value=”<%=rsCids(“catcodigo”)%>”><%=rsCids(“catdescricao”)%></option>
<%
rsCids.MoveNext
wend
rsCids.Close
set rsCids = nothing
%>
</select>
// div dos bairros
<div>
<span id=’divgrupobairros’>
<table>
<tr><td> –Selecione a cidade–</td></tr>
</table>
</span></div>
// Script do Ajax
<script>
function grupobairros()
{
var vbairros = createXMLHTTP();
vbairros.open(“post”, “objbairros.asp”, true);
vbairros.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
vbairros.onreadystatechange=function(){
if (vbairros.readyState==4){
document.all.divgrupobairros.innerHTML = vbairros.responseText;}}
vbairros.send(“codcid=” + frmlocalizar.scidades.value);
}
</script>
// Arquivo objbairros.asp
<%
‘RESGATA O ID DA CIDADE SELECIONADA PARA FAZER A SELAÇÃO DOS BAIRROS.
codcid = request(“codcid”)
‘AQUI ESTÁ NOSSO SELECT.
set rsBairros = server.createobject(“adodb.recordset”)
rsBairros.open “SELECT catcodigo, catdescricao FROM categorias WHERE cattipo = ‘B’ AND catvinculo = “&codcid&” ORDER BY catdescricao ASC”, conn
%>
<!– AUI MONTAMOS NOSSA COMBO DE BAIRROS, CONFORME A CIDADE SELECIONADA –>
<table>
<% while not rsBairros.EOF %>
<tr><td> <input type=”checkbox” value=”chkbairros_<%=rsBairros(“catcodigo”)%>” /><%=rsBairros(“catdescricao”)%></td></tr>
<%
rsBairros.MoveNext
wend
rsBairros.close
set rsBairros = nothing
%>
</table>

Quando queremos mostrar somente as cidades de um estado sem dar “refresh” na tela toda devemos fazer um AJAX para rodar e carregar somente as cidades do estado selecionado, esta rotina está em ASP.

// Combo das cidades

<%

set rsCids = Server.CreateObject(“adodb.recordset”)

rsCids.open “SELECT CATCODIGO, CATDESCRICAO FROM CATEGORIAS WHERE CATTIPO=’C’ ORDER BY CATDESCRICAO”, conn

%>

<select name=”scidades” id=”scidades” onchange=”grupobairros();”>

<option value=”">Escolha a Cidade</option>

<% while not rsCids.Eof %>

<option value=”<%=rsCids(“catcodigo”)%>”><%=rsCids(“catdescricao”)%></option>

<%

rsCids.MoveNext

wend

rsCids.Close

set rsCids = nothing

%>

</select>

// div dos bairros

<div class=”divrolagem”>

<span id=’divgrupobairros’>

<table>

<tr><td class=”divrolagem”> –Selecione a cidade–</td></tr>

</table>

</span></div>

// Script do Ajax

<script>

function grupobairros()

{

var vbairros = createXMLHTTP();

vbairros.open(“post”, “objbairros.asp”, true);

vbairros.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);

vbairros.onreadystatechange=function(){

if (vbairros.readyState==4){

document.all.divgrupobairros.innerHTML = vbairros.responseText;}}

vbairros.send(“codcid=” + frmlocalizar.scidades.value);

}

</script>

// Arquivo objbairros.asp

<%

‘RESGATA O ID DA CIDADE SELECIONADA PARA FAZER A SELAÇÃO DOS BAIRROS.

codcid = request(“codcid”)

‘AQUI ESTÁ NOSSO SELECT.

set rsBairros = server.createobject(“adodb.recordset”)

rsBairros.open “SELECT catcodigo, catdescricao FROM categorias WHERE cattipo = ‘B’ AND catvinculo = “&codcid&” ORDER BY catdescricao ASC”, conn

%>

<!– AUI MONTAMOS NOSSA COMBO DE BAIRROS, CONFORME A CIDADE SELECIONADA –>

<table>

<% while not rsBairros.EOF %>

<tr><td class=”divrolagem”> <input type=”checkbox” value=”chkbairros_<%=rsBairros(“catcodigo”)%>” /><%=rsBairros(“catdescricao”)%></td></tr>

<%

rsBairros.MoveNext

wend

rsBairros.close

set rsBairros = nothing

%>

</table>

Compartilhe :

  • Stumble upon
  • twitter

Escreva um comentário

Security Code: