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
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
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');
});
});
Eu sugiro utilizar JQuery:
if ($("#ID_DO_DROPDOWN").val() > 8) {
$("#ID_DA_DIV").show();
}
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/>
<br/>
<input type='text' class='text' name='business' value size='20' placeholder="CPF" />
<br/>
</div>
<div style='display:none;' id='divCnpj'>CNPJ<br/>
<br/>
<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/>
<br/>
<input type='text' class='text' name='business' value size='20' placeholder="CPF" />
<br/>
</div>
<div style='display:none;' id='divCnpj'>CNPJ<br/>
<br/>
<input type='text' class='text' name='business' value size='20' placeholder="CNPJ"/>
<br/>
</div>
</body>