When selecting a value from a select, a div appears

Question

When selecting a value from a select, a div appears

Navigation

#1 by (1 votes)

1

Colleagues.

I'm trying to get the user to select a value from the select, a corresponding div appears to the value that was selected. Eg: The values of select are:

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

If the user selects the value 5, a div will appear that contains another select that is multiple, if the user selects other values, another select will appear without being multiple and if you do 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's 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 the select should appear according to the selected value. The selects are within a PHP class which 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

asked by anonymous 20.01.2017 / 20:41

1 answer

Defining default values to vary with the Pug Engine Template Doubt with sql in laravel?

score 1 · Accepted Answer

Here's what I did:

$('#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><selectname="opt" id="opt">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<div id="mostra"></div>

It will help you.