Ir para conteúdo

Arquivado

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

ukow

Formulário de seleção.

Por , em ASP Clássico

Recommended Posts

ukow    1

ukow
Postado

Olá.

Estou fazendo um formulário escolar em ASP clássico e preciso fazer o seguinte:

Preciso que quando o aluno for preencher, selecione a Unidade em que estuda e ao selecionar tal unidade, é exibido outro campo para seleção dos professores que lecionam naquela unidade:

 

Exemplo: Unidade X = Prof A, B, C

Unidade Y = Prof D, E, F

Unidade Z = Prof G, H, I

 

E assim vai..

 

Tinha um modelo feito que puxava esses dados do banco, tentei alterar mas acabei fazendo com que todos os professores apareçam independente da unidade.

 

Alguém sabe como deve ser feito corretamente? Existe alguma forma de fazer isso sem dados do Banco ( prefiro rs )?

Obrigado! :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

wilnet    92

wilnet
Postado

Sem Banco de Dados?

 

Veja se esse te ajuda:

<html>
<head>

<script language="Javascript">
function showDiv(div)
{
document.getElementById("unid").className = "invisivel";	
document.getElementById("x").className = "invisivel";
document.getElementById("y").className = "invisivel";
document.getElementById("z").className = "invisivel";

document.getElementById(div).className = "visivel";
}
</script>

<style>
.invisivel { display: none; }
.visivel { visibility: visible; }
</style>

</head>
<body>

<select id="combobox" name="combobox" onChange="showDiv(this.value);">
<option value="unid">Escolha a Unidade</option>
<option value="x">Unidade X</option>
<option value="y">Unidade Y</option>
<option value="z">Unidade Z</option>
</select>

<div id="unid" class="invisivel"></div>
<br><br>
<div id="x" class="invisivel">Prof A, B, C</div>
<div id="y" class="invisivel">Prof D, E, F</div>
<div id="z" class="invisivel">Prof G, H, I</div>

</body>
</html>

Caso resolva com banco de Dados, podemos orienta-lo tb.

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado

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


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
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
Next
GenerateOptions = strOptions
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 & _
" " & 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 & _
" }" & vbCrLf & _
" }" & 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);
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

ukow    1

ukow
Postado

Sem Banco de Dados?

 

Veja se esse te ajuda:

<html>
<head>

<script language="Javascript">
function showDiv(div)
{
document.getElementById("unid").className = "invisivel";	
document.getElementById("x").className = "invisivel";
document.getElementById("y").className = "invisivel";
document.getElementById("z").className = "invisivel";

document.getElementById(div).className = "visivel";
}
</script>

<style>
.invisivel { display: none; }
.visivel { visibility: visible; }
</style>

</head>
<body>

<select id="combobox" name="combobox" onChange="showDiv(this.value);">
<option value="unid">Escolha a Unidade</option>
<option value="x">Unidade X</option>
<option value="y">Unidade Y</option>
<option value="z">Unidade Z</option>
</select>

<div id="unid" class="invisivel"></div>
<br><br>
<div id="x" class="invisivel">Prof A, B, C</div>
<div id="y" class="invisivel">Prof D, E, F</div>
<div id="z" class="invisivel">Prof G, H, I</div>

</body>
</html>

Caso resolva com banco de Dados, podemos orienta-lo tb.

 

Então Wil, preciso que quando eu selecione a unidade ele me mostre outra caixa de seleção para escolher um professor, entende? Uma seleção que de acordo com a opção me dê uma caixa de seleção diferente.

 

Tipo;

 

Na primeira seleção eu posso escolher > Doces - Salgados - Bebidas

 

Se eu escolher Doces, eu posso escolher Bolo - Chocolate - Torta

Se eu escolher Salgados eu posso escolher Coxinha - Efiha - Empada

Se eu escolher Bebidas eu posso escolher Coca - Fanta - Guaraná Jesus

 

E assim vai, sabe se é possível seguindo a base do código que me mandou? Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

wilnet    92

wilnet
Postado

Sim, basta vc ir montando os demais Itens dentro das <Div id="?"> que vc já possui. Ao invés dos nomes de exemplo que eu deixei.

 

Veja se terá dificuldades ai.

Compartilhar este post

Link para o post
Compartilhar em outros sites

wilnet    92

wilnet
Postado

Segue Novo Exemplo:

 

Exemplo com "Select"

<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        $("#palco > div").hide();
        $("#sel-escolha").change(function(){
                $("#palco > div").hide();
                $( '#'+$( this ).val() ).show('fast');
        });
});
</script>

</head>
<body>

<select id="sel-escolha" name="sel-escolha">
<option value="">Escolha um Item</option>
<option value="doces">Doces</option>
<option value="salgados">Salgados</option>
<option value="bebidas">Bebidas</option>
</select>

<div id="palco">
<br />

<div id="doces">
<select name="doce" id="doce">
<option value="">Escolha o Doce</option>
<option value="bolo">Bolo</option>
<option value="chocolate">Chocolate</option>
<option value="tortas">Tortas</option>
</select>
</div>

<div id="salgados">
<select name="salgado" id="salgado">
<option value="">Escolha o Salgado</option>
<option value="coxinha">Coxinha</option>
<option value="esfiha">Esfiha</option>
<option value="empada">Empada</option>
</select>
</div>

<div id="bebidas">
<select name="bebida" id="bebida">
<option value="">Escolha a Bebida</option>
<option value="coca">Coca</option>
<option value="fanta">Fanta</option>
<option value="guarana">Guarana</option>
</select>
</div>

</div>

</body>
</html>

Exemplo com "Radio Button"

<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        $("#palco > div").hide();
		  $("input[name='escolha']").click(function(){
          $("#palco > div").hide();
          $( '#'+$( this ).val() ).show('fast');  
        });
});
</script>

</head>
<body>


<label><input type="radio" name="escolha" value="doces" />Doces</label>
<label><input type="radio" name="escolha" value="salgados" />Salgados</label>
<label><input type="radio" name="escolha" value="bebidas" />Bebidas</label>

<div id="palco">
<br />

<div id="doces">
<select name="doce" id="doce">
<option value="">Escolha o Doce</option>
<option value="bolo">Bolo</option>
<option value="chocolate">Chocolate</option>
<option value="tortas">Tortas</option>
</select>
</div>

<div id="salgados">
<select name="salgado" id="salgado">
<option value="">Escolha o Salgado</option>
<option value="coxinha">Coxinha</option>
<option value="esfiha">Esfiha</option>
<option value="empada">Empada</option>
</select>
</div>

<div id="bebidas">
<select name="bebida" id="bebida">
<option value="">Escolha a Bebida</option>
<option value="coca">Coca</option>
<option value="fanta">Fanta</option>
<option value="guarana">Guarana</option>
</select>
</div>

</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

ukow    1

ukow
Postado

 

Segue Novo Exemplo:

 

Exemplo com "Select"

<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        $("#palco > div").hide();
        $("#sel-escolha").change(function(){
                $("#palco > div").hide();
                $( '#'+$( this ).val() ).show('fast');
        });
});
</script>

</head>
<body>

<select id="sel-escolha" name="sel-escolha">
<option value="">Escolha um Item</option>
<option value="doces">Doces</option>
<option value="salgados">Salgados</option>
<option value="bebidas">Bebidas</option>
</select>

<div id="palco">
<br />

<div id="doces">
<select name="doce" id="doce">
<option value="">Escolha o Doce</option>
<option value="bolo">Bolo</option>
<option value="chocolate">Chocolate</option>
<option value="tortas">Tortas</option>
</select>
</div>

<div id="salgados">
<select name="salgado" id="salgado">
<option value="">Escolha o Salgado</option>
<option value="coxinha">Coxinha</option>
<option value="esfiha">Esfiha</option>
<option value="empada">Empada</option>
</select>
</div>

<div id="bebidas">
<select name="bebida" id="bebida">
<option value="">Escolha a Bebida</option>
<option value="coca">Coca</option>
<option value="fanta">Fanta</option>
<option value="guarana">Guarana</option>
</select>
</div>

</div>

</body>
</html>

Exemplo com "Radio Button"

<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        $("#palco > div").hide();
		  $("input[name='escolha']").click(function(){
          $("#palco > div").hide();
          $( '#'+$( this ).val() ).show('fast');  
        });
});
</script>

</head>
<body>


<label><input type="radio" name="escolha" value="doces" />Doces</label>
<label><input type="radio" name="escolha" value="salgados" />Salgados</label>
<label><input type="radio" name="escolha" value="bebidas" />Bebidas</label>

<div id="palco">
<br />

<div id="doces">
<select name="doce" id="doce">
<option value="">Escolha o Doce</option>
<option value="bolo">Bolo</option>
<option value="chocolate">Chocolate</option>
<option value="tortas">Tortas</option>
</select>
</div>

<div id="salgados">
<select name="salgado" id="salgado">
<option value="">Escolha o Salgado</option>
<option value="coxinha">Coxinha</option>
<option value="esfiha">Esfiha</option>
<option value="empada">Empada</option>
</select>
</div>

<div id="bebidas">
<select name="bebida" id="bebida">
<option value="">Escolha a Bebida</option>
<option value="coca">Coca</option>
<option value="fanta">Fanta</option>
<option value="guarana">Guarana</option>
</select>
</div>

</div>

</body>
</html>

 

Deu super certo!

Obrigado mesmo Wil, é super simples e bem funcional

 

:clap:

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado

lembrando que você pode implementar também uma funcionalidade de autocomplete nele

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos ASP Clássico
×

Informação importante

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

  Aceito