Select option disponibilizar div

thicomp · Julho 26, 2010

Oi pessoal, td bem?

Tenho um formulário, onde contém um campo "Select/Option", só que eu preciso que qd o usuário fizer a escolha de uma opção, um outro campo (campo text) disponibilize para preenchimento. Se eu selecionar outra opção, outro campo, diferente do anterior, seja disponibilizado. Como se fosse uma div, que oculte ou apareca quando necessária.

Alguém teria alguma sugestão?

Abraços

Douglas Nogueira · Julho 26, 2010

Parece ser isso que você precisa:


<html>
<head>
	<script type="text/javascript">
		function mostraDiv(div){
			if(div.value == 'Gato'){
				document.getElementById('gato').style.display = 'block';
				document.getElementById('cachorro').style.display = 'none';
			}else{
				document.getElementById('gato').style.display = 'none';
				document.getElementById('cachorro').style.display = 'block';
			}
		}
	</script>
</head>
	<body>
		<form>
			<select>
				<option onClick="java script:mostraDiv(this);">Gato</option>
				<option onClick="java script:mostraDiv(this);">Cachorro</option>
			</select>
		</form>
		<div id='gato' style="{display:none;}">
		<label>Digite o nome do Gato:</label<input type="text" />
		</div>
		<div id='cachorro' style="{display:none;}">
		<label>Digite o nome do Cachorro:</label<input type="text" />
		</div>
	</body>
</html>
[/codebox]

Claro que existe várias maneiras de fazer isso!

Abraços!

Douglas

thicomp · Julho 26, 2010

É exatamente isso mesmo que eu preciso, mas não to conseguindo executa-lo.

O exemplo que você me passou também não disponibiliza o campo, após seleção do item.

Abraços

Douglas Nogueira · Julho 26, 2010

Mas que bizarrice.... não sei porque em duas linhas do código a palavra "javascript" ficou "java script", mas você estava certo, aquele código so funciona no firefox, não vou entra no méritos do motivo do IE diferir nas suas reações mas ta aí um código que testei nos 2.


<html>
	<head>
		&lt;script type="text/javascript">
		function mostraDiv(){
			option = document.getElementById('123').value;
			if(option == "gato"){
				document.getElementById('gato').style.display = 'block';
				document.getElementById('cachorro').style.display = 'none';
			}else{
				document.getElementById('gato').style.display = 'none';
				document.getElementById('cachorro').style.display = 'block';
			}
		}
		</script>
	</head>
	<body>
		<form>
			<select id='123' onChange="mostraDiv();">
				<option value='gato'>Gato</option>
				<option value='cachorro'>Cachorro</option>
			</select>
		</form>
		<div id='gato' style="{display:none;}">
			<label>Digite o nome do Gato:</label><input type="text"/>
		</div>
		<div id='cachorro' style="{display:none;}">
			<label>Digite o nome do Cachorro:</label><input type="text"/>
		</div>
	</body>
</html>
[/codebox]

tomara que de certo dessa vez.... :blink:

Editado Julho 26, 2010 por Douglas Nogueira

thicomp · Julho 27, 2010

Ae cara, valeu... Show de bola...

Cara, só mais uma coisa...

Preciso fazer com que, através de um link, uma div seja exibida ou ocultada. Só que o problema é que nessas div's, são executados comandos asp, acesso a banco, etc...

Fiz alguns testes aqui, mas qd eu executo essas funções javascript sem os comandos asp, ela roda normal, mas qd coloco no meio do código, juntamente com asp, ele não roda...

você saberia me dizer se é pra ter algum problema com isso??

Mais uma vez, obrigado!!!

Abraços

Thiago

Douglas Nogueira · Julho 27, 2010

Estranha esta questão, pelo que conheço de server side scripting a mesma não costuma interferir no comportamento do JavaScript, uma vez que o mesmo roda no Navegador, salvo em alguns casos quando se usa um framework como por exemplo Java Server Faces que altera o nome dos campos, causando assim alguma confusão nos desavisados, mas coloca seu código ASP aí, que daremos uma olhada apesar de não ser programador Asp, a lógica é igual pra tudo.

Abraços!

thicomp · Agosto 2, 2010

Bom Dia!

Oi cara, veja se você consegue me ajudar...

Abraços

<script language="JavaScript">
function showdiv(ativar,id1,id2)
{ var A=document.getElementById(id1);
var B=document.getElementById(id2);
if(ativar=='sim')
{
B.style.display = 'block';
A.style.display= 'none';
}
else
{
A.style.display = 'block';
B.style.display= 'none';
}
}
</SCRIPT>
<%
Const forReading=1, forWriting=2, forAppending=8
Dim Obj
Set ObjFile=CreateObject("Scripting.FileSystemObject")
Set FSO=CreateObject("Scripting.FileSystemObject")

IF request.querystring("ano")="atual" Then
ano=year(now)
Else
ano=request.querystring("ano")
End IF
response.write "<HTML><HEAD><STYLE>TR{font-family:verdana;font-size:8pt;}A{text-decoration:none;}</STYLE></HEAD>"
response.write "<BODY link='blue' alink='blue' vlink='blue'>"
response.write "<CENTER><TABLE cellpadding='1' cellspacing='1' border='0' width='600'>"
Set fs=Server.CreateObject("Scripting.FileSystemObject")
Set fo=fs.GetFolder("F:\Proposta\PIs\")
response.write "<TR><TD colspan='5' align='left' height='35' valign='center'>"

For Each x4 In fo.SubFolders
ano1=x4.Name

IF CInt(ano)=CInt(ano1) Then
response.write "<B>["&ano1&"] </B>"
Else
response.write "<A href=visu.asp?ano="&ano1&"'><B>["&ano1&amp] </B></A>"
End IF
Next

IF fs.FolderExists("F:\Proposta\PIs\"&ano&"\")=FALSE Then
response.write "<TR><TD align='center'><FONT size='3'><B>Nenhuma Proposta cadastrada.</B></FONT>"
Else
Set fo=fs.GetFolder("F:\Proposta\PIs\"&ano&"\")

'PROCURA POR ANO CADASTRADO
For Each x In fo.SubFolders
'Print the name of all subfolders in the test folder
ncc=x.Name
Set fo=fs.GetFolder("F:\PropostaPIs\"&ano&"\"&ncc&"\")

%>
<div id="faq1A"><a href="#" onclick="showdiv('sim','faq1A','faq1B'); return false" ><strong>+<%=ncccomp%></strong></a></div><div id="faq1B" style="display:none">
<div align="left"><a href="#" onclick="showdiv('não','faq1A','faq1B'); return false" ><strong>-<%=ncccomp%></strong></a><br>
<div align="justify">
<%
For Each x1 In fo.SubFolders
'Print the name of all subfolders in the test folder
nmset=x1.Name

IF nmset<>"Geral" Then
nmset=nmset
Else
nmset=""
End IF

IF request.querystring("ccust")=ncc then
Set fo=fs.GetFolder("F:\Proposta\"&ano&"\"&ncc&"\"&nmset&"\")
' response.write "<TR><TD colspan='5' bgcolor='#97ACC4'><FONT color='#FFFFFF'><B> "&replace(nmset, "_", " ")&"</FONT></B>"
response.write "<TR align='center' bgcolor='#4E7CB7'><TD><FONT color='#FFFFFF'><B>Número</B></FONT>"
response.write "<TD><FONT color='#FFFFFF'><B>Descrição</B></FONT>"
response.write "<TD><FONT color='#FFFFFF'><B>Proponente</B></FONT>"
response.write "<TD><FONT color='#FFFFFF'><B>Data de Entrega</B></FONT><TD> "

For Each x2 In fo.SubFolders
'Print the name of all subfolders in the test folder
numpi=x2.Name
Set fo=fs.GetFolder("F:\Proposta\PIs\"&ano&"\"&ncc&"\"&nmset&"\"&numpi&"\")

IF FSO.FileExists("F:\Proposta\PIs\"&ano&"\"&ncc&"\"&nmset&"\"&numpi&"\"&numpi&".txt")=TRUE Then
Set ObjFile=FSO.GetFile("F:\Proposta\PIs\"&ano&"\"&ncc&"\"&nmset&"\"&numpi&"\"&numpi&".txt")
Set ObjStream=ObjFile.OpenAsTextStream(forReading, FALSE)
Dim num, num1, num2
Texto=ObjStream.ReadAll
Dados=Split(Replace(Texto, Chr(13), ""), Chr(10)) //substitui o enter pelo tab

For x3=0 To LBound(Dados)

Set FSO=CreateObject("Scripting.FileSystemObject")
Set Folder=FSO.GetFolder("F:\Proposta\PIs\"&ano&"\"&ncc&"\"&nmset&"\"&numpi&"\docs\")
Set Files=Folder.Files

For Each File In Files
docum=File.Name
Next
response.write "<TR align='center' bgcolor='"&cor&"'><TD>"

response.write dados(0)
response.write "<TD>"&dados(1)
response.write "<TD>"&dados(2)
response.write "<TD>"&dados(6)
response.write "<TD><A href='cadpi.asp?ano="&ano&"&npi="&dados(0)&"&ccust="&dados(3)&"&sit=and&setor="&nmset&"'><IMG src='\img\refresh.gif' width='15' border='0' title='Upload de Arquivo.'></A>"
response.write "</DIV>"
response.write "</TABLE>"
Next
End IF
Next
End IF
Next
Next
End IF
Set fo=nothing
Set fs=nothing
%>

Entrar

Select option disponibilizar div

Pergunta

thicomp

Link para o comentário

Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

Douglas Nogueira

Link para o comentário

Compartilhar em outros sites

thicomp

Link para o comentário

Compartilhar em outros sites

Douglas Nogueira

Link para o comentário

Compartilhar em outros sites

thicomp

Link para o comentário

Compartilhar em outros sites

Douglas Nogueira

Link para o comentário

Compartilhar em outros sites

thicomp

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades