Estou trabalhando com um sistema de cadastro, onde todos os funcionários serão cadastrados, mas nem todos terão acesso ao programa. Para isso, estou utilizando um select com o nível de acesso que ele vai ter.
<div class="form-group">
<label for="nivel_acesso" class="col-sm-2 control-label">Nível de Acesso</label>
<div class="col-sm-2">
<select class="form-control" id="nivel_acesso" required onchange="option_check()">
<option value="">Selecione</option>
<option value="0">Sem Acesso</option>
<option value="1">Administração</option>
<option value="2">Informática</option>
</select>
</div>
</div>
<div class="form-group" id="hidden_div" style="display:none;">
<label for="usuario" class="col-sm-2 control-label">Usuário</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="usuario" placeholder="Usuário" required>
</div>
</div>
Por exemplo, se quero cadastrar um funcionário que terá acesso a parte de administração, ele precisará de um usuário para fazer login. Estou mostrando ou escondendo o campo usuário utilizando essa função do JavaScript:
<script type="text/javascript">
function option_check(){
if(document.getElementById("nivel_acesso").value != "0" && document.getElementById("nivel_acesso").value != ""){
document.getElementById("hidden_div").style.display = "block";
}
}
E funciona na primeira vez, porém, se troco de "Administração" para "Sem Acesso", por exemplo, o campo continua lá. Como faço para verificar a cada vez que a opção for trocada?