Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

luizsnpjr

Select Dinâmico - ASP/AJAX

Recommended Posts

Galera, aproveitando o laboratório então, estou passando um código de select dinâmico (sabe, aquele esquema de selecione o estado e através de uma busca no BD ele retorna automaticamente as cidades referente ao estaod selecionado), naquele estilo que sempre vemos e que ralamos muito pra consegui.

Este código era em PHP/Ajax, eu traduzi pra ASP/AJAX, por tanto verifiquem os códigos pra saber se tá tudo certo, eu testei e está 100%.

O legal deste código é que ele permite que você trabalhe com um VALUE no option, onde alguns códigos que eu tinha visto não permitiam, apenas adicionavam como VALUE o nome da cidade.

 

Segue o código e o link pra fazer o download dos JS:

 

Página Principal, exe: default.asp

<html>
<%
Dim Cn 
Set Cn = Server.CreateObject("ADODB.Connection")
set Rs = server.createObject("ADODB.Recordset")
Cn.ConnectionString = ("DRIVER={MySQL ODBC 5.1 Driver};SERVER=xxxxx;PORT=3306;DATABASE=xxxxx;USER=xxxxx;PASSWORD=xxxxx;OPTION=3
;") 
Cn.Open
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Selecione um estado primeiro</title>


<script type="text/javascript" src="js/scriptaculous/prototype.js"></script>
<script type="text/javascript">
//<![CDATA[
function CarregaCidades( SelectEstado, div_destino )
{
  // Nova requisi?o AJAX do prototype
  new Ajax.Request('cidades.asp?estadoId=' + SelectEstado.value,
  {
	method	 : 'get',
	onCreate:function()
	{
	  $(div_destino).innerHTML = 'Carregando as cidades...';
	}, // onCreate
	onComplete : function(transport)
	{
	  if(transport.status==200)
	  {
		$(div_destino).innerHTML = transport.responseText; 
	  } // transport.status
	} // onComplete
  }); // ajax Request
} // function CarregaCidades
//]]>
</script>
</head>

<body>
<form>
<select id="estado" name="estado" onChange="CarregaCidades(this, 'lista_cidades')">
  <option selected="selected" value="null">Selecione um estado...</option>
<%
ESTADO = "SELECT * FROM ESTADOS ORDER BY estado"
Rs.Open ESTADO, Cn, 3, 1
If Rs.Eof = False Then
	Do
		If Rs.Eof = True Then Exit Do
%>
	<option value="<%=Rs("Id")%>"><%=Rs("estado")%></option>
<%
	Rs.MoveNext
	Loop
End If
Rs.Close
%>
</select><br />
<div id="lista_cidades">Selecione um estado primeiro...</div>
</form>
</body>
<%
	set Rs= Nothing
	set Cn = Nothing
%>
</html>

Página cidades.asp:

<%
Dim Cn 
Set Cn = Server.CreateObject("ADODB.Connection")
set Rs = server.createObject("ADODB.Recordset")
Cn.ConnectionString = ("DRIVER={MySQL ODBC 5.1 Driver};SERVER=xxxxx;PORT=3306;DATABASE=xxxxx;USER=xxxxx;PASSWORD=xxxxx;OPTION=3
;") 
Cn.Open
%>
<select id="cidade" name="cidade">
  <option selected="selected" value="null">Selecione uma cidade...</option>
<%
ID = Request.QueryString("estadoId")
SQL = "SELECT * FROM CIDADES WHERE id_estado = '"&ID&"' ORDER By cidade"
Rs.Open SQL, Cn, 3, 1
If Rs.Eof = False Then
	Do
		If Rs.Eof = True Then Exit Do
%>
  <option value="<%=Rs("Id")%>"><%=Rs("cidade")%></option>
<%
	Rs.MoveNext
	Loop
End If
Rs.Close
%>

<%
	set Rs= Nothing
	set Cn = Nothing
%>
</select>

As TABELAS do banco de dados foram feitas assim:

CIDADES

Id - AutoNumeração

cidade - texto (255 caracteres)

id_estado - texto (5 caracteres)

 

ESTADOS

Id - AutoNumeração

estado - texto (255 caracteres)

 

Link para download dos JS: AQUI

Link para teste: AQUI

 

Até mais galera, em breve estarei postando outros códigos.

Compartilhar este post


Link para o post
Compartilhar em outros sites

As informações importadas pelo codigo vem com problemas na aentuação

 

basa colocar no inicio da página <% Response.Charset="ISO-8859-1" %>

Compartilhar este post


Link para o post
Compartilhar em outros sites

luizsnpjr

gostaria de saber se poderia disponibilizar os js novamente porque o link que há no seu post esta desativado.

é de muita ajuda esse codigo, se ele tiver disponivel para download tambem agradeceria

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.