Publicado em 9 de mar.

listbox ou combobox com dados do banco mysql

#asp classico

como criar um select no html puxando dados de uma tabela do meu banco mysql?

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Fernando C· 10 de mar.

http://trocadicas.blogspot.com.br/2015/10/preenchendo-formularios-com-menu_15.html

xanburzum· 10 de mar.

dá uma olhada no fórum, faz uma pesquisa que eu postei alguns exemplos, tem vários com bd, txt, arrays etc

rafaeldupalio· 11 de mar.

xan eu procurei mas nao achei nada acho que nao estou usando as palavras certas

xanburzum· 26 de mar.

exemplo 1

Default.asp

Teste Combo

 Categoria:

 [ Selecione ]
 "&rs("nome")&"")
 rs.moveNext : wend
 end if
 set rs = nothing
 %>

 Sub-Categoria:

ajax.js

function GetXMLHttp() {
 if (navigator.appName == "Microsoft Internet Explorer") {
 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 } else {
 xmlHttp = new XMLHttpRequest();
 }
 return xmlHttp;
 }
 var mod = GetXMLHttp();

 function alimentarCombo(valor) {
 mod.open("GET", "Carrega.ajax.asp?id="+valor+"", true);
 mod.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 mod.onreadystatechange = function() {
 if (mod.readyState == 4) {
 document.getElementById("resultado").innerHTML = mod.responseText;
 }
 };
 mod.send(null);
 }

Carrega.ajax.asp

 [ Selecione ]
 "&rs("nome")&"")
 rs.moveNext :wend end if
 set rs = nothing
 %>

exemplo 2:

Tabela estados
Campos: Cod, Estado

Tabela Cidades
Campos: CodCidade, Cidade, CodEstado

Tabela Imoveis
Campos: CodImovel, CodEstado, Imoveis, CodCidade

Arquivo default.asp

CÓDIGO
<%
'AQUI REALIZAMOS A CONEXÃO COM O BANCO DE DADOS. NENHUM SEGREDO.
Set conexao = Server.CreateObject("ADODB.connection")
DSNtest = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.Mappath("dados_01.mdb")
conexao.Open DSNtest

sql = "select * from estados"
set rs = conexao.Execute(sql)
%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>:: ::</title>
<style type="text/css">

<!-- /AQUI APLICAMOS UMA PEQUENO CSS SIMPLES./ body {

margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

-->

</style></head>

<body>

<script language="javascript" src="ajax.js"></script>
<FORM method="post" name="frm1" id="frm1">
<table width="779" height="19" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
 <td width="163" height="40" valign="top"><table width="163" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td height="29" background="Imagens/menu_001.gif"> </td>
 </tr>
 <tr>
 <td height="450" valign="top" bgcolor="#ECF2F0"><table width="150" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td height="19">
 <select style="width:200" id="estado" name="estado" onchange="trazdados();">
 <option value="0"></option>
 <%
 'ABAIXO NÓS PREENCHEMOS A PRIMEIRA COMBO. ATÉ AQUI TAMBÉM SEM NENHUM SEGREDO, NÉ?
 'NÃO ESQUEÇAM DE UMA COISA: PRECISAREMIS DO ID DA PRIMEIRA COMBO PARA PREENCHER O AS OUTRAS DUAS.
 'PORTANTO COLOQUEM NO VALUE DA COMBO O CÓDIGO DELA. PARA PEGARMOS DEPOIS...
 while not rs.EOF
 %>
 <option value="<%Response.Write(rs("COD") & "|" & rs("ESTADO"))%>" <%=selected%>><%=rs("ESTADO")%></option>
 <%
 rs.MoveNext
 wend

 rs.close
 set rs = nothing
 %>
 </select>
 </td>
 </tr>
 <tr>
 <td height="19">
 <!-- VEJAM QUE AQUI EU NÃO FAÇO A SEGUNDA COMBO. COLOCO ELA VAZIA, APENAS PARA QUANDO O USUÁRIO ENTRAR
 VER QUE TEM A COMBO.
 E REPAREM QUE EXISTE ABAIXO ISSO: <span id='divcombouf'>. ESSA DIVI SERÁ A SEGUNDA COMBO QUE VIRÁ PREENCHIDA APÓS
 SELECIONAR UM REGISTRO NA PRIMEIRA COMBO. MAIS A FRENTE SERÁ EXPLICADO COMO E QUAL A FUNÇÃO QUE FAZ ISSO.
 -->
 <span id='divcombouf'>
 <select style="width:200" id="cidade" name="cidade" onChange="dadoscidade();">
 <option value="0"></option>
 </select>
 </span>
 </td>
 </tr>
 <tr>
 <td height="19">
 <!-- ESSA É A TERCEIRA COMBO. A EXPLICAÇÃO DA SEGUNDA (ACIMA) É EXATEMENTE IGUAL. NÃO MUDA NADA. -->
 <span id='divcomboimovel'>
 <select style="width:200" id="imovel" name="imovel">
 <option value="0"></option>
 </select>
 </span>
 </td>
 </tr>
 <tr>
 <td height="19"> </td>
 </tr>
 </table></td>
 </tr>
 </table></td>
 <td width="453"></td>
 <td width="163" valign="top"><table width="163" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td height="29" background="Imagens/menu_002.gif"> </td>
 </tr>
 <tr>
 <td height="450" bgcolor="#F9FBFA"> </td>
 </tr>
 </table></td>
 </tr>
</table>
<table width="779" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
 <td height="33" background="Imagens/barra_003.gif"> </td>
 </tr>
</table>

<input type="hidden" name="codestado" id="codestado" value="<%=codestado%>" size="3">
<input type="hidden" name="codcidade" id="codcidade" value="<%=codcidade%>" size="3">
<input type="hidden" name="codimovel" id="codimovel" value="<%=codimovel%>" size="3">
</form>
</body>
</html>

<script>

//ESSA FUNÇÃO IRÁ TRAZER O ID DO ESTADO SELECIONADO NA PRIMEITA COMBO PARA PODERMOS PREENCHER A SEGUNDA E TERCEIRA COMBO.
function trazdados()
{
//AQUI "INFORMAMOS" QUE O PRIMEIRA COMBO SERÁ SELECIOANDA E DEPOIS DAMOS UM SPLIT NA BARRA (|) QUE
//SEPARA OS VALORES QUE ESTÃO NO VALUE DA COMBO1. SE VC'S EXIBREM O CÓDIGO FONTE NO BROWSER VERÃO QUE A COMBO1 ESTARÁ ASSIM:
// IDESTADO | NOMEESTADO.

 var arr = new String(frm1.estado.value);
 arr = arr.split('|');

 //AQUI TRAZEMOS APENAS O ID DE CADA ESTADO QUE FOR SELECIONADO.
 frm1.codestado.value = arr[0];

 combocidade(); //CHAMA A FUNÇÃO AJAX QUE PREENCHER A COMBO CIDADE, ASSIM QUE É SELECIONADO UM REGISTRO NA COMBO1.
 comboimovel(); //CHAMA A FUNÇÃO AJAX QUE PREENCHER A COMBO IMÓVEK, ASSIM QUE É SELECIONADO UM REGISTRO NA COMBO1.

}

//AQUI É A FUNÇÃO QUE PREENCHE A COMBO CIDADE.
//NÃO VOU ME APROFUNDAR NA EXPLICAÇÃO DESSA FUNÇÃO, JÁ QUE NOS OUTROS ARTIGOS QUE FIZ SOBRE AJAX, TEM A EXPLICAÇÃO SOBRE ELA.
//MAS REPAREM NO NOME DA DIV QUE DEMOS AQUI: divcombouf. É O MESMO NOME QUE DEMOS NO ID DAQUELA DIV QUE EXISTE ANTES DA COMBO2 NA PÁGINA.
function combocidade()
{

 var combouf = createXMLHTTP();
 combouf.open("post", "objestado.asp", true);
 combouf.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 combouf.onreadystatechange=function(){
 if (combouf.readyState==4){// abaixo o texto do gerado no arquivo executa.asp e colocado no div
 document.all.divcombouf.innerHTML = combouf.responseText;}}
 combouf.send("codestado=" + frm1.codestado.value);

}

//AQUI É A FUNÇÃO QUE SERÁ PREENCHIDA DE ACORDO COM O REGISTRO SELECIONADO NA COMBO1 E NA COMBO2.
//A EXPLICAÇÃO DA FUNÇÃO ACIMA VALE PARA ESSA TAMBÉM, JÁ QUE SÃO IGUAIS.
function comboimovel()
{

 var comboimovel = createXMLHTTP();
 comboimovel.open("post", "objimovel.asp", true);
 comboimovel.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 comboimovel.onreadystatechange=function(){
 if (comboimovel.readyState==4){// abaixo o texto do gerado no arquivo executa.asp e colocado no div
 document.all.divcomboimovel.innerHTML = comboimovel.responseText;}}
 comboimovel.send("codestado=" + frm1.codestado.value + "&codcidade="+frm1.codcidade.value);

}

//NESTA FUNÇÃO IREMOS OBTER O ID DA CIDADE. E PRA QUE PRECISAMOS DELA? PARA PREENCHER A COMBO IMÓVEL.
//A COMBO IMÓVEL SÓ TRARÁ REGISTROS DE ACORDO COM O REGISTRO SELECIONADO NA COMBO2.
//A EXPLICAÇÃO DA FUNÇÃO TRAZDADOS TAMBÉM VALE PARA ESSA.
function dadoscidade()
{

 var arr = new String(frm1.cidade.value);
 arr = arr.split("|");

 frm1.codcidade.value = arr[3];

 //VEJA QUE CHAMAMOS A FUNÇÃO QUE PREENCHE A COMBO IMÓVEL, DEPOIS QUE UM REGISTRO DA COMBO CIDADE É SELECIONADA.
 comboimovel();
}

//VOCÊS DEVEM TER REPARADO QUE NAS FUNÇÕES combocidade E comboimovel EXISTEM ESSE CAMINHO OBJETO/NOMEDOARQUIVO.ASP. CERTO?
//PORQUE CRIEI? PORQUE SE NO SEU SISTEMA VOCÊ PRECISAR USAR UMA DESSAS COMBOS, VOCÊ CHAMA APENAS O OBJETO.
//É COMO TRABALHAR COM ORIENTAÇÃO A OBJETOS.

//VEJA A EXPLICAÇÃO DAS PÁGINAS LOGO ABAIXO:
</script>

Arquivo objestado.asp

CÓDIGO
<%
'FAZ A CONEXÃO, SEM NENHUM SEGREDO.
Set conexao = Server.CreateObject("ADODB.connection")
DSNtest = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.Mappath("dados_01.mdb")
conexao.Open DSNtest

'RESGATA O ID DO ESTADO SELECIONADO PARA FAZER A SELAÇÃO DA COMBO DOIS (CIDADE).
codestado = request("codestado")

'AQUI ESTÁ NOSSO SELECT.
sql = "SELECT ESTADOS.COD, ESTADOS.ESTADO, CIDADES.CIDADE, CIDADES.CODCIDADE, IMOVEIS.CODIMOVEL, IMOVEIS.IMOVEIS "

sql = sql & "FROM (ESTADOS INNER JOIN CIDADES ON ESTADOS.COD = CIDADES.CODESTADO) " sql = sql & "INNER JOIN IMOVEIS ON CIDADES.CODCIDADE = IMOVEIS.CODCIDADE WHERE ESTADOS.COD = " & codestado & " order by cidades.cidade" set rs = conexao.Execute(sql) %>

<table cellpadding="0" cellspacing="0" border="0">
<tr>
 <td>
 <select style="width:200" id="cidade" name="cidade" onChange="dadoscidade(this.value);">
 <%
 while not rs.EOF

 'if CStr(codestado) = Cstr(rs("COD")) then
 ' selected = "selected"
 'else
 ' selected = ""
 'end if
 %>
 <option value="<%Response.Write(rs("COD") & "|" & rs("ESTADO") & "|" & rs("CIDADE") & "|" & rs("CODCIDADE") & "|" & rs("CODIMOVEL") & "|" & rs("IMOVEIS"))%>" <%'=selected%>><%=server.HTMLEncode(rs("CIDADE"))%></option>
 <%
 rs.MoveNext
 wend

 rs.close
 set rs = nothing
 %>
 </select>
 </td>
</tr>
</table>

Arquivo objimovel.asp

CÓDIGO
<%
'CONEXÃO COM O BANCO.
Set conexao = Server.CreateObject("ADODB.connection")
DSNtest = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.Mappath("dados_01.mdb")
conexao.Open DSNtest

'RESGATAMOS O ID DO ESTADO E DA CIDADE. PORQUE? PORQUE QUANDO SELECIONARMOS UM ESTADO A COMBO DE CIDADES E INÓVEL SERÁ PREENCHIDA.
'E QUANDO SELECIONARMOS UMA CIDADE A COMBO IMÓVEL SERÉ PREENCHIDA COM O REGISTRO CERTO.
codestado = request("codestado")
codcidade = request("codcidade")

'UMA PEQUENA COMPRAÇÃO PARA NÃO FAZER TODA A INSTRUÇÃO DENTRO DO SELECT.
'BEM SIMPLES, NÃO É? RSRSRSRS
if len(codcidade) then
filtro = " and CIDADES.codcidade = "&codcidade
else
filtro = ""
end if

'NOSSA SQL. VEJA QUE CHAMA A VARIÁVEL FILTRO NO SQL. É COMO SUBSTITUIR AQUELE INSTRUÇÃO QUE ATRIBUI A FILTRO NA CLÁSULA SQL.
sql = "SELECT ESTADOS.COD, ESTADOS.ESTADO, CIDADES.CIDADE, CIDADES.CODCIDADE, IMOVEIS.CODIMOVEL, IMOVEIS.IMOVEIS "
sql = sql & "FROM ESTADOS INNER JOIN (CIDADES INNER JOIN IMOVEIS "
sql = sql & "ON CIDADES.CODCIDADE = IMOVEIS.CODCIDADE) ON ESTADOS.COD = CIDADES.CODESTADO "
sql = sql & "WHERE ESTADOS.COD = " & codestado & filtro & " ORDER BY IMOVEIS.IMOVEIS"
'response.Write(sql)
'response.End()
set rs = conexao.Execute(sql)
%>

<table cellpadding="0" cellspacing="0" border="0">
<tr>
 <td>
 <select style="width:200" id="imovel" name="imovel">
 <%while not rs.EOF%>
 <option value="<%Response.Write(rs("COD") & "|" & rs("ESTADO") & "|" & rs("CIDADE") & "|" & rs("CODCIDADE") & "|" & rs("CODIMOVEL") & "|" & rs("IMOVEIS"))%>" <%'=selected%>><%=server.HTMLEncode(rs("IMOVEIS"))%></option>
 <%
 rs.MoveNext
 wend

 rs.close
 set rs = nothing
 %>
 </select>
 </td>
</tr>
</table>

e o mais simples e funcional

<%
Set objCon = Server.CreateObject("ADODB.Connection")
objCon.Open "Data Source=C:\pasta\database.mdb;Provider=Microsoft.Jet.OLEDB.4.0;"

strQ = "SELECT * FROM UF ORDER BY nome ASC"
Set objRS = objCon.Execute(strQ)

Response.Write "<SELECT NAME='estado'>"
Response.Write "<OPTION VALUE='' SELECTED></OPTION>"

If Not objRS.EOF Then
While Not objRS.EOF
Response.Write "<OPTION VALUE='" & objRS("nome") & "'"
If Request("estado") = objRS("nome") Then Response.Write " selected"

 Response.Write ">" & objRS("nome") & "</OPTION>"
 objRS.MoveNext
 Wend

End If

Response.Write "</SELECT>"

objCon.Close

Set objRS = Nothing
Set objCon = Nothing
%>

tem outros no fórum