when selecting a value from a select, a div appears

Asked

Viewed 2,573 times

2

Colleagues.

I want to make the user when selecting a select value, appear a div corresponding to the value that was selected. For example: The values of select are:

3, 4, 5, 6, 7, 8 and 12

If the user selects the value 5, a div will appear where it contains another select that is Multiple, if the user selects other values, another select will appear without being Multiple and if it does not select any, keep the select without being Multiple as default.

The code I’m trying is this, but when you load the page, no select appears. It is in javascript, but I accept suggestions in 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 where select should appear as the selected value. Selects are inside a PHP class that would not be my problem.

<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 jquery

  • Your javascript is changing the visibility of the guys to None (document.getElementById("seriesProfessores").style.visibility ="none";) Trade for hidden as you set in div

  • Sorry @rLinhares, I could not understand. The problem in my case would be that if I did not select any value, the other select does not appear.

  • 1

    I understood that the Divs are loaded hidden (visibility:hidden), so if you do not select anything it does not show any even. I thought the problem was that it did not hide after selecting the option.

1 answer

1


Look what I’ve done: 

$('#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>

Will help you.

  • Thank you Vitor.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.