Show hidden div according to the value of a Dropdown

Asked

Viewed 2,006 times

6

I have no knowledge of javascript and would like to know how to make a div appear according to a value of a capo dropdown.

Example: imagine a dropdown with values from 1 to 10. if we choose a note < that 8 it show a div

javascript html

  • Hi Fabio, did any of the answers answer your question?

3 answers

2

Put in CSS display: none; or opacity: 0; for the Ivs to be hidden.

Then add an Event Handler to the select for him to detect when there are changes. Then in the function that is run when that note/option be chosen you have to apply the CSS that makes that div show. And you’ll probably want to hide the others you’ve selected before, or in case there’s a wrong selection.

Example:

var notas = document.querySelectorAll('#notas div');
document.querySelector('select').addEventListener('change', function () {
    var index = parseInt(this.value, 10);
    [].forEach.call(notas, function (div, i) {
        if (index == i) div.classList.add('mostrarNota');
        else div.classList.remove('mostrarNota');
    });
});

jsFiddle: http://jsfiddle.net/4bj50jga/

  • Except my intention is only if the grade is less than 8 to make a single div appear. this and a search system if the first question and note is less than 8 appears a div showing a few more questions

1

I suggest using Jquery: 

if ($("#ID_DO_DROPDOWN").val() > 8) {
  $("#ID_DA_DIV").show();
}

  • ola Amigo is this idea, plus the div ta starting already active

  • Put this property on your div display:None;

1

You can use jQuery to obtain the value selected and perform the comparison. If the value is < 8, shows a div, or it shows another or hides the same. It would look something like this:

Let’s say you own one input for CPF and others to CNPJ, and you want to show according to the selected value.

    <body>
<select id='ddlPessoa'>
<option value="0">N/A</option>
<option value="7">CNPJ</option>
<option value="9">CPF</option>
</select>
<div style='display:none;' id='divCpf'>CPF<br/>&nbsp;
<br/>&nbsp;
    <input type='text' class='text' name='business' value size='20' placeholder="CPF" />
    <br/>
</div>
    <div style='display:none;' id='divCnpj'>CNPJ<br/>&nbsp;
<br/>&nbsp;
    <input type='text' class='text' name='business' value size='20' placeholder="CNPJ"/>
    <br/>
</div>
</body>

So just get the value and show and/or hide the div drawn:

$(document).ready(function(){
    //Chama o evento após selecionar um valor
    $('#ddlPessoa').on('change', function() {
        //Verifica se o valor é igual a 1 e mostra a divCnpj
      if ( this.value == '1')
      {
            $("#divCpf").hide();
        $("#divCnpj").show();
      }
        //Se o tempo for mé igual a 2 mostra a divCpf
      else if( this.value == '2')
      {
          $("#divCnpj").hide();
        $("#divCpf").show();
      }
        //Se não for nem 1 nem 2 esconde as duas
        else{
             $("#divCnpj").hide();
              $("#divCpf").hide();
        }
    });
});


$(document).ready(function(){
    //Chama o evento após selecionar um valor
    $('#ddlPessoa').on('change', function() {
        //Verifica se o valor é igual a 1 e mostra a divCnpj
      if ( this.value == '1')
      {
            $("#divCpf").hide();
        $("#divCnpj").show();
      }
        //Se o tempo for mé igual a 2 mostra a divCpf
      else if( this.value == '2')
      {
          $("#divCnpj").hide();
        $("#divCpf").show();
      }
        //Se não for nem 1 nem 2 esconde as duas
        else{
             $("#divCnpj").hide();
              $("#divCpf").hide();
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<select id='ddlPessoa'>
<option value="0">N/A</option>
<option value="1">CNPJ</option>
<option value="2">CPF</option>
</select>
<div style='display:none;' id='divCpf'>CPF<br/>&nbsp;
<br/>&nbsp;
    <input type='text' class='text' name='business' value size='20' placeholder="CPF" />
    <br/>
</div>
    <div style='display:none;' id='divCnpj'>CNPJ<br/>&nbsp;
<br/>&nbsp;
    <input type='text' class='text' name='business' value size='20' placeholder="CNPJ"/>
    <br/>
</div>
</body>

DEMO

Browser other questions tagged javascript html

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