Display hidden div according to the value of a Dropdown

Question

Display hidden div according to the value of a Dropdown

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

5

I'm not aware of javascript and would like to know how I can make a div appear according to a capo's dropdown value.

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

javascript html

asked by anonymous 03.08.2015 / 04:08

3 answers

How to put part of a bold text in Tkinter? Google Maps with multiple markers from the database

score 1 · Answer 1

Place% s of% or display: none; in the CSS for the divs to be hidden.

Then join an event handler to opacity: 0; to detect it when there are changes. Then in the function that is run when that note / select is chosen you have to apply the CSS that causes that div to be shown. And you'll probably want to hide the ones you've already selected before, or if 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: link

score 0 · Answer 2

0

I suggest using JQuery:

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

03.08.2015 / 05:10

score 0 · Answer 3

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

Let's say you have input for CPF and another for 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 void:

$(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><selectid='ddlPessoa'><optionvalue="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