Combos dinamicos

Koreia · Novembro 23, 2012

Boa tarde pessoal,

Eu tenho q criar um relatório em ASP clássico que utiliza combos dinâmicos acredito que vai uns 4 combos..

Alguém teria exemplos para eu dar uma olhada, pois só encontro exemplos em PHP com ajax.

Exemplos tipo seleciona o estado e a cidade.. é so mesmo para dar uma base.

Grato

Marcelo

xanburzum · Novembro 23, 2012

procure no lab. de script postei vários exemplos, inclusive em AJAX, vários combos dinamicos e dependentes

Koreia · Novembro 24, 2012

procure no lab. de script postei vários exemplos, inclusive em AJAX, vários combos dinamicos e dependentes

Cara dei uma olhada nos seus tópicos e não encontrei os combos dinâmicos..

você tem o link nas suas postagens?

Grato

xanburzum · Novembro 24, 2012

um exemplo de combo que após selecionar , neste caso, o primeiro combo é de país, que aós selecionar ele preenche com o estado e depois ele carregar o outro combo com as cidades, usando ASP e bd, como também um exemplo de 3 combos em AJAX, abaixo os exemplos:

exemplo 1

este script faz o preenchimento de um combo e pega o valor do combo preenchido pra fazer o outro combo, tipo:

um combo pais e outro combo estado

as tabelas são:

pais- com os campos

cod_pais - chave primária

nome

estado -c om os campos

cod_pais - chave estrangeira

cod_estado

nome

as tabelas possuem relacionamento de um para muitos

<% Option Explicit 

'declaro as var 
dim var1,var2,var3,....., etc 
'recupero as var 
varpais=request.querystring("pais") 
'crioa a conexao 
%> 

<!--# include file="conexao/conexao.asp"--> 

<% 
'abro a conexao 
Call abre_conexao 
'crio o rs 
set rspais=server.createobject("ADODB.Recordset") 
'crio a SQL 
SQLpais="SELECT * FROM pais ORDER BY nome" 
rspais.open SQLpais,conexao,1,3 
%> 


'aki vou criar o combo, onde no evento onchange ele irá enviar o value do combo pais para a mesma pag, para eu recuperar o codigo do pais e assim preencher o combo estado. 

<form action="inserirend_action.asp" method="post"name="frmteste"> 
<select name="pais" size="1" Onchange="window.navigate('pag_atual.asp?pais='+frmteste.pais.value)"> 

<% while not rspais.eof%> 
<option value="<%=rs("cod_pais")%>"> 
<% if varpais=rs("pais") then 
response.write("Selecionado") 
end if%> 
<%=rs("nome")%> 
</option> 
<% rspais.movenext 
wend%> 
</select> 
<% set rspais=nothing%> 

'aki crio o combo estado 

<select name="estado"size="1"> 
if request("pais") ="" then%> 
<option value=""> selecione um pais 
<%else 
'crio o SQL estado 
SQLestado="Select * from estado where cod_pais="&varpais&" Order by nome" 
'crio o rsestado 
set rsestado=server.createobject("ADODB.Recordset") 
rsestado.open SQLestado,conexao,1,3 
<%while not rsestado.eof%> 
<option value="<%=rsestado("cod_estado")%>"> 
<%=rs("nome")%> 
</option> 
<%rs.movenext 
wend 
end if%> 
</select> 
<% set rsestado=nothing%> 
<% 'fecho a conexao 
call fecha_conexao%>

aqui o segundo exemplo

Tabela estados

Campos: Cod, Estado

Tabela Cidades

Campos: CodCidade, Cidade, CodEstado

Tabela Imoveis

Campos: CodImovel, CodEstado, Imoveis, CodCidade

Arquivo default.asp

<%
'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>
<!-- CHAMAMOS AQUELA FAMOSA FUNÇÃO DE AJAX QUE COMO SEMPRE DIGO É PADRÃO PARA TUDO.
VEJA EXPLICAÇÕES DELA EM OUTROS ARTIGOS MEUS, QUE SE TRATA DE AJAX.
-->
<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>

<!-- AQUI COMO JÁ TINHA DITO PRECISO DOS ID'S DOS REGISTROS QUE ESTÃO NA COMBO PARA PODER PREENCHER CADA UMA.
ENTÃO CRIA - SE UM CAMPO HIDDEN PARA CADA COMBO. ASSIM QUANDO SELECIONAR UM REGISTRO, O ID DELE IRÁ PARA OS CAMPOS HIDDEN'S.
ISSO VALE PARA AS TRÊS COMBOS.
-->
<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 você'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

<%
'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)
%>

<!-- AUI MONTAMOS NOSSA COMBO DE CIDADE, CONFORME O ESTADO SELECIONADO -->
<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

<%
'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)
%>

<!-- AQUI MONTAMOS NOSSA COMBO DE IMÓVEL
PARA QUANDO FOR SELECIONADO UM REGISTRO NA COMBO ESTADO E NA COMBO CIDADE.
-->
<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>

Para uma saída textbox autocompleting / combobox, usamos checks, o conteúdo da caixa de texto para selecionar a caixa de correspondências de texto, Então autocompletes imprime cada palavra chave, há uma alternância, um botão / imagem switch para alternar entre as duas caixas, todos os valores são armazenados na caixa de texto, assim você vai usar para o Nome do campo de formulário, o nome do campo de formulário para a caixa de seleção serão o mesmo que a caixa de texto, mas com a letra' caixa 'adicionadoao fim.

Exemplo para usar:

<%	



Dim objAuto
Set objAuto = New clsAutoCompleteCombo

objAuto.AddBlankOption = True
objAuto.ForceMatch = False
objAuto.SelectBoxOptions = Array("Name 1", "Name 2", "Name 3", "etc...")
objAuto.SwitchImage = "../cni_images/cni_companies/ReturnToList.jpg"
or
objAuto.SwitchImage = ""

objAuto.ToolTip = "Esta é uma dica de ferramenta"
objAuto.Width = 120
objAuto.WriteAutoComplate("empresa")
Set objAuto = Nothing

Class clsAutoCompleteCombo

Private m_astrOptions 'Array

Private m_strSwitchImage 'String

Private m_blnForceMatch 'Boolean

Private m_intWidth 'Integer

Private m_blnAddBlank 'Boolean

Private m_strAltText 'String

Private Sub Class_Initialize()

m_strSwitchImage = ""

m_blnForceMatch = False

m_blnAddBlank = False

m_intWidth = 150

m_strAltText = "Use as setas para alternar entre texto e selectbox"

End Sub

Public Sub WriteAutoComplate(ElementName)

Dim strSwitch 'String

Dim strSelectBoxName 'String

Dim strOutput 'String

Dim blnCompatible 'Boolean

Dim strAltText 'String

Dim blnUseJSToolTip ' Boolean

blnCompatible = IsBrowserCompatable()

If blnCompatible = True Then

'Set the select box name

strSelectBoxName = ElementName & "box"

'Definir a imagem mudar

If m_strSwitchImage = "" Then

strSwitch = "<SPAN ALT=""" & m_strAltText & """ ONCLICK=""toggleDisplayboxes(CompCompanyName, CompCompanyNameBox);"" " & _

"STYLE=""cursor:hand;font-family:Webdings;font-size:8px;"" onmouseover=""auotcompleteshowtip(this,event,'" & _

Server.HTMLEncode(m_strAltText) & "')"" onmouseout=""auotcompletehidetip()"">34</SPAN>"

blnUseJSToolTip = True

Else

strSwitch = "<IMG ALT=""" & m_strAltText & """ SRC=""" & m_strSwitchImage & """ BORDER=""0"" ONCLICK=""toggleDisplayboxes(CompCompanyName, CompCompanyNameBox);"" STYLE=""cursor:hand;"">"

blnUseJSToolTip = False

End If

strOutput = GenerateJavaScript(blnUseJSToolTip) & "<TABLE WIDTH=""100"" BORDER=""0"" CELLSPACING=""0"" CELLPADDING=""0"">" & _

"<TR><TD VALIGN=""middle"">" & vbCrLf & _

"<INPUT TYPE=""text"" STYLE=""height:20px;width:" & m_intWidth & "px;"" NAME=""" & ElementName & """ ID=""" & _

ElementName & """ ONKEYUP=""autoComplete(this," & strSelectBoxName & ",'text'," & LCase(m_blnForceMatch) & ");"">" & _

"<SELECT ONCHANGE=""setTextBoxFromSelect(" & ElementName & ", this, 'text');"" NAME=""" & _

strSelectBoxName & """ ID=""" & strSelectBoxName & """ STYLE=""height:20px;width:" & m_intWidth & _

"px;display:none;"">" & vbCrLf & _

GenerateOptions(m_astrOptions, m_blnAddBlank) & vbCrLf & _

"</SELECT></TD><TD VALIGN=""middle"">" & vbCrLf & _

strSwitch & "</TD></TR></TABLE>" & vbCrLf

Else

strOutput = "<INPUT TYPE=""text"" NAME=""" & ElementName & """ ID=""" & ElementName & """>" & vbCrLf

End If

Response.Write strOutput

End Sub

Public Property Let ForceMatch(Value)

m_blnForceMatch = CBool(Value)

End Property

Public Property Let SwitchImage(Value)

m_strSwitchImage = Value

End Property

Public Property Let SelectBoxOptions(Value)

m_astrOptions = Value

End Property

Public Property Let Width(Value)

m_intWidth = Value

End Property

Public Property Let AddBlankOption(Value)

m_blnAddBlank = CBool(Value)

End Property

Public Property Let ToolTip(Value)

m_strAltText = Value

End Property

Private Function IsBrowserCompatable()

Dim strBrowser 'String

Dim fltVersion 'Float

Dim objBrowser 'MSWC.BrowserType

Dim blnContinue 'Boolean

Set objBrowser = Server.CreateObject("MSWC.BrowserType")

strBrowser = objBrowser.browser

fltVersion = CDbl(objBrowser.version)

If strBrowser = "IE" Then

blnContinue = True

Else

blnContinue = False

End If

If blnContinue = False Then

IsBrowserCompatable = False

Else

If fltVersion > 4.5 Then

IsBrowserCompatable = True

Else

IsBrowserCompatable = False

End If

Set objBrowser = Nothing

End Function

Private Function GenerateOptions(OptionArray, AddBlank)

Dim intMin 'Integer

Dim intMax 'Integer

Dim intCurrent 'Integer

Dim strOptions 'String

Dim strPreviousValue 'String

If IsArray(OptionArray) Then

intMin = LBound(OptionArray)

intMax = UBound(OptionArray)

Else

intMin = 0

intMax = -1

End If

strOptions = ""

For intCurrent = intMin To intMax

If Trim(OptionArray(intCurrent)) <> "" And OptionArray(intCurrent) <> strPreviousValue Then

strPreviousValue = Trim(OptionArray(intCurrent))

strOptions = strOptions & "<option value=""" & OptionArray(intCurrent) & """>"

strOptions = strOptions & OptionArray(intCurrent)

strPreviousValue = Trim(OptionArray(intCurrent))

strOptions = strOptions & "</option> "

End if

End Function

Private Function GenerateJavaScript(IncludeToolTip)

Dim strOutput 'As String

strOutput = " <script LANGUAGE=""JavaScript"">" & vbCrLf & _

" function autoComplete (textbox, selectbox, property, forcematch) {" & vbCrLf & _

" //Variables." & vbCrLf & _

" var blnFound = false; //Flag usada para combinar o valor do textbox ao selectbox." & vbCrLf & _

" var strCursorKeys = ""8;33;34;35;36;37;38;39;40;45;46;""; //teclas do cursor para ignorar." & vbCrLf & _

" var intOptionCount = 0; //Isso será usado para percorrer a caixa de selecção para localizar uma correspondência." & vbCrLf & _

" //Loop through the contents of the selectbox" & vbCrLf & _

" for (var intOptionCount = 0; intOptionCount < selectbox.options.length; intOptionCount++) {" & vbCrLf & _

" //Se houver uma correspondência definir o sinalizador encontrado para verdadeiro e break no loop." & vbCrLf & _

" if (selectbox.options[intOptionCount][property].toUpperCase().indexOf(textbox.value.toUpperCase()) == 0) {" & vbCrLf & _

" blnFound=true;" & vbCrLf & _

" break;" & vbCrLf & _

" }" & vbCrLf & _

" " & vbCrLf & _

" //Se encontramos jogo, definir a opção selecionada. Se não for definida a opção selecionada para nada" & vbCrLf & _

" if (blnFound) { selectbox.selectedIndex = intOptionCount; }" & vbCrLf & _

" else { selectbox.selectedIndex = -1; }" & vbCrLf & _

" " & vbCrLf & _

" //Verifique se há um intervalo de texto" & vbCrLf & _

" if (textbox.createTextRange) {" & vbCrLf & _

" //se forcematch é verdade e encontrou a flagé falsa, remover o último caractere da caixa de texto" & vbCrLf & _

" if (forcematch && !blnFound) {" & vbCrLf & _

" textbox.value = textbox.value.substring(0,textbox.value.length-1); " & vbCrLf & _

" return;" & vbCrLf & _

" }" & vbCrLf & _

" " & vbCrLf & _

" //Verifique o keyPressed, compará-la com a lista de teclas de ignorar" & vbCrLf & _

" if (strCursorKeys.indexOf(event.keyCode+"";"") == -1) {" & vbCrLf & _

" //A tecla pressionada não está na lista" & vbCrLf & _

" //Crie o intervalo de texto" & vbCrLf & _

" var r1 = textbox.createTextRange();" & vbCrLf & _

" //Store the text" & vbCrLf & _

" var oldValue = r1.text;" & vbCrLf & _

" //Defina o novo valor igual ao valor selectbox correspondente ou o valor antigo se não for encontrado na lista" & vbCrLf & _

" var newValue = blnFound ? selectbox.options[intOptionCount][property] : oldValue;" & vbCrLf & _

" " & vbCrLf & _

" //Se o novo valor não é igual ao valor antigo, defina o campo de texto para a igualdade" & vbCrLf & _

" //newvalue(selectbox), e destacar o resto fora do texto" & vbCrLf & _

" if (newValue != textbox.value) {" & vbCrLf & _

" textbox.value = newValue;" & vbCrLf & _

" var rNew = textbox.createTextRange();" & vbCrLf & _

" rNew.moveStart('character', oldValue.length) ;" & vbCrLf & _

" rNew.select();" & vbCrLf & _

" }" & vbCrLf & _

" function setTextBoxFromSelect (textbox, selectbox, property) {" & vbCrLf & _

" textbox.value = selectbox.options[selectbox.selectedIndex][property];" & vbCrLf & _

" }" & vbCrLf & _

" function toggleDisplayboxes(eText, eSelect) {" & vbCrLf & _

" if(eText.style.display=='none') {" & vbCrLf & _

" eText.style.display=''" & vbCrLf & _

" eSelect.style.display='none'" & vbCrLf & _

" eText.focus()" & vbCrLf & _

" }" & vbCrLf & _

" else {" & vbCrLf & _

" eText.style.display='none'" & vbCrLf & _

" eSelect.style.display=''" & vbCrLf & _

" eSelect.focus()" & vbCrLf & _

" } " & vbCrLf & _

" }" & vbCrLf

If IncludeToolTip = True Then

strOutput = strOutput & " function auotcompleteshowtip(current,e,text)" & vbCrLf & _

"{" & vbCrLf & _

" if (document.all)" & vbCrLf & _

" {" & vbCrLf & _

" thetitle=text.split('<br>')" & vbCrLf & _

" if (thetitle.length > 1)" & vbCrLf & _

" {" & vbCrLf & _

" thetitles=""""" & vbCrLf & _

" for (i=0; i<thetitle.length; i++)" & vbCrLf & _

" thetitles += thetitle + ""\r\n""" & vbCrLf & _

" current.title = thetitles" & vbCrLf & _

" }" & vbCrLf & _

" else current.title = text" & vbCrLf & _

" }" & vbCrLf & _

" else if (document.layers)" & vbCrLf & _

" {" & vbCrLf & _

" document.tooltip.document.write( " & vbCrLf & _

" '<layer bgColor=""#FFFFE7"" style=""border:1px ' +" & vbCrLf & _

" 'solid black; font-size:12px;color:#000000;"">' + text + '</layer>')" & vbCrLf & _

" document.tooltip.document.close()" & vbCrLf & _

" document.tooltip.left=e.pageX+5" & vbCrLf & _

" document.tooltip.top=e.pageY+5" & vbCrLf & _

" document.tooltip.visibility=""show""" & vbCrLf & _

" }" & vbCrLf & _

"}" & vbCrLf & _

"function auotcompletehidetip()" & vbCrLf & _

"{" & vbCrLf & _

" if (document.layers)" & vbCrLf & _

" document.tooltip.visibility=""hidden""" & vbCrLf & _

"}"

End If

strOutput = strOutput & "</SCRIPT>" & vbCrLf

GenerateJavaScript = strOutput

End Function

End Class

%>[/code]

O codigo abaixo atualiza um segundo combo baseado na escolha do primeiro acessando o banco de dados sem dar refresh na página.Com uma estrutura de dados com duas tabelas:

tb_lanc_categ com os campos:

cod - Numeração Automática

categoria - Texto

e a tabela, tb_lanc_sub, com os campos:

cod_tipo - Numeração Automática

codcat - Número

desclanc - Texto

Arquivo index.asp

<% Response.Charset="ISO-8859-1" 'linha responsavel pela acentuação%>
<HTML>
<HEAD>
<TITLE>.:: Combos com AJAX ::.</TITLE>
<META NAME="Author" CONTENT="Wellington Marinheiro">
<script src="lanc_ComboAjax.js"> </script>
</HEAD>
<BODY>
<%  
if request.queryString("at")= "" then

   db = Server.MapPath("dados.mdb")
   Set cnn = Server.CreateObject("adodb.Connection")
   cnn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="& db &";"

   SQL="SELECT * FROM tb_Lanc_categ ORDER by categoria"
   SET rs = Server.CreateObject("Adodb.recordset")
   rs.Open SQL,cnn
   if not rs.eof then
       lista = rs.getrows()
       total = ubound(lista,2)
   end if
   rs.close
   set rs = nothing
   %>
   <CENTER>
   Utilizando AJAX para atualizar um COMBOBOX
   <hr>
   <form name="form" action="index.asp?at=1" method="post">
       <table border="1" bgcolor=#F4F4F4 width=40% align="center">
           <tr>
               <td><B>Categoria</B>
               <td>
                   <select name="categoria" class="select"  Onchange="atualizaLanc(this.value);">
                       <option value="">selecionar...

                       <%
                       for t=0 to total
                           response.write "<option value=" & lista(0,t) & "|" & lista(1,t) &">" & lista(1,t) & "</option>"
                       next%>
                   </select>
               <tr>
                   <td><B>Lançamento:</B>
                   <td>
                       <div id="lanc">
                           <select name="Lancamento">
                               <option value="">Selecionar categoria</option>
                           </select>
                       </div>
               <tr>
                   <td colspan="2" align="center">
                   <INPUT TYPE="submit" value="Enviar">
               </tr>
           </table>
       </form>
   </CENTER>
<%
else
       response.write "<div align=center><B>Resultado:</B><BR>"
       response.write "Categoria selecionada: " & request.Form("nomecat") & "<BR>"
       response.write "Lançamento: " & request.Form("lancamento") & "<BR><BR>"
       response.write "<A HREF='index.asp'>Nova escolha</A>"
       response.write "</div>"
end If
%>

</body>
</html>

Arquivo lanclista.asp

<% Response.Charset="ISO-8859-1" 'linha responsavel pela acentuação

db = Server.MapPath("dados.mdb")
Set cnn = Server.CreateObject("adodb.Connection")
cnn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="& db &";"

texto=Split(Request("ID"),"|")
cat = texto(0)

Set rs = Server.CreateObject("ADODB.Recordset")
sql = " Select * from tb_lanc_sub where codcat = " & cat & " order by desclanc"
rs.Open sql,cnn,3
%>
<select name="lancamento">
   <option value="">Selecionar categoria</option>
   <% while not rs.eof %>
           <option value="<%=rs("desclanc")%>"><%=rs("desclanc")%></option>
   <%        rs.MoveNext
   Wend%>
</select>
   <INPUT TYPE="hidden" NAME="nomecat" value="<%=texto(1)%>">
<%
rs.Close
Set rs = Nothing
%>

Arquivo lanc_comboajax.js
CÓDIGO
var requip;
function loadXMLDoc(url){
   requip = null;
   if (window.XMLHttpRequest) {
       requip= new XMLHttpRequest();
       requip.onreadystatechange = ProcessEquip; // o req.  foi alterado para requip
       requip.open("POST", url, true); // o req.  foi alterado para requip
       requip.send(null); // o req.  foi alterado para requip

   } else if (window.ActiveXObject) {
       try {
           requip= new ActiveXObject("Msxml2.XMLHTTP.4.0");
       } catch(e) {
           try {
               requip= new ActiveXObject("Msxml2.XMLHTTP.3.0");
           } catch(e) {
               try {
                   requip= new ActiveXObject("Msxml2.XMLHTTP");
               } catch(e) {
                   try {
                       requip= new ActiveXObject("Microsoft.XMLHTTP");
                   } catch(e) {
                       requip= false;
                   }
               }
           }
       }
       if (requip) {
           requip.onreadystatechange = ProcessEquip;
           requip.open("POST", url, true);
           requip.send();
       }
   }
}


function ProcessEquip(){
   if (requip.readyState == 4) {
       if (requip.status == 200) {
           document.getElementById("lanc").innerHTML = requip.responseText;
       } else {
           alert("Houve um problema ao obter os dados:\n" + requip.statusText);
       }
   }
}
function atualizaLanc(valor){
   loadXMLDoc("lancListaComb.asp?ID="+valor);
}

Koreia · Novembro 26, 2012

Valeu mesmo cara vou dar uma boa estudada por aqui.

xanburzum · Novembro 26, 2012

você pode adaptar para sua necessidade, com certeza um desese irá lhe servir...

Entrar

Arquivado

Combos dinamicos

Recommended Posts

Koreia 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Koreia 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Koreia 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante