2

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>
3
  • Seu javascript tá trocando a visibilidade dos caras pra none (document.getElementById("seriesProfessores").style.visibility ="none";) Troca pra hidden como você setou na div
    – rLinhares
    Commented 20/01/2017 às 20:16
  • Desculpe @rLinhares, não consegui entender. O problema no meu caso seria que se eu não selecionar nenhum valor, o outro select não aparece.
    – user24136
    Commented 20/01/2017 às 20:20
  • 1
    eu entendi que as divs são carregadas escondidas (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.
    – rLinhares
    Commented 20/01/2017 às 20:26

1 Resposta 1

1

Olha aqui o que eu fiz:

$('#opt').change(function(){
	var valor = $('#opt').val();
  $('#mostra').css('display','block')
	$('#mostra').html(valor);
});
#opt{
  width:100px;
  padding:3px 5px;
  font-size:18px;
}
#mostra{
  width:280px;
  line-height:50px;
  font-size:20px;
  background:#fff;
  border:2px solid #f00;
  color:#00f;
  text-align:center;
  margin-top:40px;
  display:none;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<select name="opt" id="opt">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<div id="mostra"></div>

Vai te ajudar.

1
  • Obrigado Vitor.
    – user24136
    Commented 20/01/2017 às 21:57

Você deve fazer log-in para responder a esta pergunta.