[Resolvido] Abrir e Fechar DIV

[vitinho.vitor 0]

Olá pessoal,

fiz um pequeno script que está funcionando parcialmente

<script>
function setText(){
var x=document.getElementById('option1')
value = x.options[x.selectedIndex].value
if (value == '0')
document.getElementById('comum').style.display='block';
else if (value == '1')
document.getElementById('gerente').style.display='block';
else 
document.getElementById('comum').style.display='none';
 document.getElementById('gerente').style.display='none';
}
</script>

e o select

<select onchange='setText()' id='option1'>
<option value='0'>Usuário Comum</option>
<option value='1' selected="selected">Usuário Gerente</option>
<option value='2'>Usuário Administrador</option>
</select>

<div id='comum' style="display:none">
Gerente:
<select name='id_gerente'><option value='".$row['id']."'>".$row['nome']."</option></select>
</div>

<div id='gerente' style="display:none">
<table>
<tr><td>Região</td><td><input type="text" name="regiao" /></td></tr></table>
</div>

 

Quando eu seleciono Usuário Comum (0) ele abre a div certa com o select, quando eu sleciono Usuário Administrador (2) ele fecha as divs porém quando eu seleciono Gerente (1) ele não mostra nem oculta nada.

Não achei o meu erro, onde está?

 

Outra coisa, como eu faço para que quando eu selecione uma opção e quando eu selecionar outra ele oculte a primeira div?

 

Obrigado

Vitor

 

Ninguém pessoal?

 

Obrigado

[srnetcave 1]

Bem primeiramente, de uma olhada nas duas primeiras linhas da sua funcao... esta declarando variaveis mas nao tem nada delimitando elas...

 

<script>
function setText(){
var x=document.getElementById('option1')
value = x.options[x.selectedIndex].value
if (value == '0')
document.getElementById('comum').style.display='block';
else if (value == '1')
document.getElementById('gerente').style.display='block';
else 
document.getElementById('comum').style.display='none';
 document.getElementById('gerente').style.display='none';
}
</script>

 

Outra coisa, eh importante seguir um padrao, fechando os statements corretamente, utilizando '{}' como abaixo.

Agora vou tentar explicar oque seu codigo esta fazendo...

<script>
function setText(){
   // Pega o Elemento pelo ID
   var x = document.getElementById('option1'),
       // Aqui, pega o valor da option selecionada
       value = x.options[x.selectedIndex].value;
   // Se o valor da option for 0, mostra o select para selecionar o genente
   if (value == '0') {
       document.getElementById('comum').style.display='block';
   // Se o valor for 1, mostra o campo para digitar p estado, e teria que selecionar o gerente tb?
   } else if (value == '1') {
       document.getElementById('gerente').style.display='block';
   // Ou entao, se for qualquer outro valor, esconde o select e o textfield certo?
   } else {
       document.getElementById('comum').style.display='none';
       document.getElementById('gerente').style.display='none';
   }
}
</script>

 

Agora, oque eu acho que você quer fazer, eh

se valor for 0 (usuario comum) mostra o select para selecionar o gerente certo?

 

se o valor for 1 (usuario gerente) mostra o select e o text input certo?

 

se for administrador, esconde os dois?

 

Aqui o exemplo funcionando...

 

<script type="text/javascript">
   function setText(){
       var x=document.getElementById('option1'),
       value = x.options[x.selectedIndex].value,
       comum = document.getElementById('comum'),
       gerente = document.getElementById('gerente');
       if (value == 0) {
           comum.style.display = 'block';
           gerente.style.display = 'none';
       } else if (value == 1) {
           comum.style.display = 'block';
           gerente.style.display = 'block';
       } else {
           comum.style.display = 'none';
           gerente.style.display = 'none';
       }
   }
</script>


<select onchange='setText()' id='option1'>
   <option value='0'>Usuário Comum</option>
   <option value='1' selected="selected">Usuário Gerente</option>
   <option value='2'>Usuário Administrador</option>
</select>

<div id='comum' style="display:block">
   Gerente:
   <select name='id_gerente'><option value='".$row['id']."'>".$row['nome']."</option></select>
</div>

<div id='gerente' style="display:block">
   <table>
       <tr><td>Região</td><td><input type="text" name="regiao" /></td></tr></table>
</div>

[vitinho.vitor 0]

Muito obrigado, estava esquecendo as chaves {}. Fiz somente uma alteração no gerente mas é isso.

 

Muito obrigado.

Fechado