Como alterar o layout da JSP ao selecionar uma opção do menu HTML

19 de setembro de 2007 3 respostas

bsl.lacerda 19 de setembro de 2007

Boa tarde pessoal!
Eu gostaria de saber como eu faço para alterar o layout da JSP ao selecionar uma opção do menu HTML.
Tag:

<select>
  <option value="1">Opcao1</option>
  <option value="2">Opcao1</option>
  ...
</select>

Eu tenho uma aplicação que exibe dados de um “Incidente” registrado, e neste menu eu tenho o status do Incidente (aberto, fechado ou pendente de hardware) que quando pesquisado aparece como Status = Aberto. Eu quero que quando o usuário quiser alterar o status do problema tipo, o usuário quiser fechar o Incidente, quando ele selecionar a opção de status “fechado” no tal menu, seja exibida na mesma tela uma textarea para que o usuário informe qual foi a solução para o problema, e após isto gravar novamente este incidente só que desta vez com status = fechado.
Entenderam?
Até breve e obrigado…

3 Respostas

dmarcosm 19 de set. de 2007

Javascript e Div! =]

no onchange da combo você mostra um ou outro Div de acordo com a opção que o usuário escolheu!

bsl.lacerda 19 de set. de 2007

Olá dmarcosm…
Você teria um código para eu utilizar como exemplo? Eu não sei nada de javascript.
Ficaria agradecido…

dmarcosm 19 de set. de 2007

Dá uma olhada neste código. Talvez te ajude:

&lt;html&gt;
	&lt;head&gt;
		&lt;script&gt;
			function verificarOpcao(opcao) {
				var div1 = document.getElementById("divOpcao1");
				var div2 = document.getElementById("divOpcao2");
				var div3 = document.getElementById("divOpcao3");
				
				switch (opcao) {
					case '1':
						div1.style.display = "";
						div2.style.display = "none";
						div3.style.display = "none";
					break;
					case '2':
						div1.style.display = "none";
						div2.style.display = "";
						div3.style.display = "none";
					break;
					case '3':
						div1.style.display = "none";
						div2.style.display = "none";
						div3.style.display = "";
					break;
					default:
						div1.style.display = "none";
						div2.style.display = "none";
						div3.style.display = "none";
					break;
				}
			}
		&lt;/script&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;select id="selTeste" onchange="verificarOpcao(this.value)";&gt;
			&lt;option value=""&gt;Selecione&lt;/option&gt;
			&lt;option value="1"&gt;Opção 1&lt;/option&gt;
			&lt;option value="2"&gt;Opção 2&lt;/option&gt;
			&lt;option value="3"&gt;Opção 3&lt;/option&gt;
		&lt;/select&gt;
		<br>
		&lt;div id="divOpcao1" style="display:none;"&gt;
			Este é o div mostrado quando o usuário escolher a opção <b>1</b> na combo.
		&lt;/div&gt;
		&lt;div id="divOpcao2" style="display:none;"&gt;
			Este é o div mostrado quando o usuário escolher a opção <b>2</b> na combo.
		&lt;/div&gt;
		&lt;div id="divOpcao3" style="display:none;"&gt;
			Este é o div mostrado quando o usuário escolher a opção <b>3</b> na combo.
		&lt;/div&gt;
	&lt;/body&gt;
&lt;/html&gt;

Ps.: Só um conselho! Se você estiver desenvolvendo para web e muito importante aprender sobre Javascript e CSS. Mais cedo ou mais tarde você vai precisar escrever ou alterar alguma coisa. =]

Espero ter ajudado. Até.

Criado 19 de setembro de 2007

Ultima resposta 19 de set. de 2007

Respostas 3

Participantes 2

3 Respostas

Topicos relacionados