Colegas.
Estou querendo fazer com que o usuário ao selecionar um valor do select, apareça uma div correspondente ao valor que foi selecionado. Por ex.: Os valores do select são:
3, 4, 5, 6, 7, 8 e 12
Se o usuário selecionar o valor 5, aparecerá uma div onde contém um outro select que é multiple, se o usuário selecionar outros valores aparecerá outro select sem ser multiple e se não selecionar nenhum, manter o select sem ser multiple como padrão.
O código que estou tentando é esse, porém quando carrega a página, nenhum select aparece. Ele está em javascript, porém aceito sugestões em Jquery:
<script type="text/javascript">
function optionCheck(){
var option = document.getElementById("options").value;
if(option == "5"){
document.getElementById("seriesProfessores").style.visibility
="visible";
document.getElementById("seriesAlunos").style.visibility ="none";
}else if(option == "7" || options == "3" || options == "4" || options == "6" || options == "12"){
document.getElementById("seriesProfessores").style.visibility ="none";
document.getElementById("seriesAlunos").style.visibility ="visible";
}else{
document.getElementById("seriesAlunos").style.visibility ="visible";
}
} </script>
HTML
<select class="form-control select2" id="options" onchange="optionCheck()" name="TipoAcesso" style="width: 100%;">
<option selected="selected">Selecione o tipo de acesso</option>
<option value="3">Administrador da Escola</option>
<option value="7">Aluno</option>
<option value="4">Coordenador</option>
<option value="5">Professor</option>
<option value="8">Responsável</option>
<option value="6">Secretaria</option>
<option value="12">Gerente da Plataforma</option>
</select>
DIV onde deve aparecer o select conforme o valor selecionado. Os selects estão dentro de uma classe PHP do qual não seria o meu problema.
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
</div>
<div id="seriesAlunos" style="visibility:hidden"><?php $tipo = "Alunos"; echo $metodos->visualizarSeries($_SESSION['EscolaSelecionada'],$tipo); ?></div>
<div id="seriesProfessores" style="visibility:hidden"><?php $tipo = "Escolas"; echo $metodos->visualizarSeries($_SESSION['EscolaSelecionada'],$tipo); ?></div>
</div>
javascript
tá trocando a visibilidade dos caras pra none (document.getElementById("seriesProfessores").style.visibility ="none";
) Troca prahidden
como você setou nadiv
visibility:hidden
), então se você não selecionar nada não exibe nenhum mesmo. Achei que o problema era que não escondia depois de selecionada a opção.