Carregar um select com base em outro

[Guilherme Schumacher 3]

Salve pessoal tudo certo?

 

tenho uma dúvida que deve ser bem básica, mas eu não achei especificamente isso...

 

tenho uma tabela de cadastro de usuários na qual ele fornece quantas informações quiser, mas preciso que seja sequencial então o que preciso é assim:

 

um select da tabela "bairros" listando os bairros mas com a opção "não informar" selecionada

caso ele deseje selecionar um bairro, ao selecionar carrega dinamicamente a tabela "ruas", que é ligada a tabela "bairros" e vai mostrar neste 2º select somente as ruas daquele bairro...

 

acho que não deve ser tão complicado, mas eu não achei nenhum tuto... então se alguém tiver um link ou a teoria de como é eu agradeceria =)

 

Desde já obrigado!

[Oczy 0]

Fala Amigao... é simples...

 

Vamos dividir a coisa em tres arquivos. Sao eles o HTML, o JS e o ASP

 

Se o uma pronta de carros, mas pode ser facilmente adaptada para o que precisa.

 

html (Repare que tem uma div chamada Ajax_Modelo é ela que vai receber os dados quando selecionar o primeiro box. Ai voce muda o nome conforme sua necessidade.

 

<label id="LblMarca" class="label" style="padding:5px 0px;">Marca:</label>
		<select name="Marca2" id="Marca2" class="CampoMaiorLat" onChange="MandaID(this.value)">
       	  <option value="0">Selecione</option>
       	  <%
			GoSel = "Select * From Fabricantes Order BY Fabricante ASC"
			Set ObjRS = ObjCn.Execute(GoSel)

			While not ObjRS.EOF
				Response.Write "<option value='"&ObjRS("Id_Fab")&"'>"&ObjRS("Fabricante")&"</option>"
				ObjRS.MoveNext
			Wend
			Set ObjRS = Nothing
			Set GoSel = Nothing
		%>
     	  </select>
		<label id="LblModelo" class="label" style="padding:5px 0px;">Modelo:</label>
           <div id="Ajax_Modelo">
           <select name="Modelo" id="Modelo" class="CampoMaiorLat">
           </select>
           </div>

 

JavaScript arquivo js

/*
'Pesquisa de Modelo de Veiculo
*/

var xmlHttp

/* Envia Id Para Pesquisa */
function MandaID(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
	alert ("Este browser no suporta HTTP Request")
	return
}

var url="AuxPesModelo.asp" // o arquivo que ir executar a SQL das cidades
url=url+"?Fabricante="+str // recebe o ID do estado para filtrar as cidade
url=url+"&sidjs="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

/* Essa funo ir exibir o resultado na DIV */
function stateChanged()
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
	document.getElementById("Ajax_Modelo").innerHTML=xmlHttp.responseText
}
}

/* Instancia */
function GetXmlHttpObject()
{
var objXMLHttp=null

if (window.XMLHttpRequest)
{
	objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
	objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

 

Arquivo ASP (Responsavel por fazer a busca no banco de dados)

<%
 Id_Fab = request.querystring("Fabricante")
%>

<select name="Modelo" id="Modelo" class="CampoMaiorLat">
<option value="0">Selecione</option>
<% 
  GoSel=" SELECT * FROM Modelos WHERE Id_Fab="&Id_Fab
  Set ObjRS = ObjCN.execute(GoSel)

  while not ObjRS.eof 
%>
<option value="<%=ObjRS("Id_Mod")%>">  <%=ObjRS("Modelo")%></option>
<% 
  ObjRS.MoveNext
  wend

  Set ObjRS = Nothing
  Set GoSel = Nothing
%>
</select>

Espero ter ajudado

 

Abraços