6

Não tenho conhecimento de javascript e gostaria de saber como posso fazer uma div apareça de acordo com um valor de um capo dropdown.

Exemplo: imagina um dropdown com valores de 1 a 10. se escolhermos uma nota < que 8 ele mostrar uma div

1
  • Oi Fabio, alguma das respostas respondeu à tua pergunta?
    – Sergio
    Commented 4/05/2019 às 23:57

3 Respostas 3

2

Coloca no CSS display: none; ou opacity: 0; para as divs estarem escondidas.

Depois junta um event handler ao select para ele detetar quando houver mudanças. Depois na função que é corrida quando essa nota/option fôr escolhida tens de aplicar o CSS que faz com que essa div se mostre. E provavelmente vais querer esconder as outras que já tenhas selecionado antes, ou caso haja uma seleção errada.

Exemplo:

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/

1
  • Ola só que minha intenção é só se a nota for menor que 8 fazer aparecer uma unica div. isso e um sistema de pesquisa se a primeira pergunta que e a nota for menor que 8 aparece uma div mostrando mais algumas perguntas Commented 3/08/2015 às 12:16
1

Eu sugiro utilizar JQuery:

if ($("#ID_DO_DROPDOWN").val() > 8) {
  $("#ID_DA_DIV").show();
}
2
  • ola Amigo é essa a ideia, mais a div ta iniciando ja ativa Commented 3/08/2015 às 3:26
  • Ponha essa propriedade na sua div display:none; Commented 3/08/2015 às 4:30
1

Você pode utilizar jQuery para obter o value selecionado e realizar a comparação. Se o valor for < 8, mostra uma div, senão mostra outra ou oculta a mesma. Ficaria mais ou menos assim:

Digamos que você possui um input para CPF e outr para CNPJ, e você quer mostrar de acordo com o valor selecionado.

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

Assim, basta obter o valor e mostra e/ou ocultar a div esolhida:

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

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .