O que precisa no seu caso é a aplicação de um if
convencional usando o próprio JavaScript.
Antes de mais nada, alguns ajustes feitos no seu código (modificando algumas partes propositalmente para que você veja mais possibilidades).
Demos um id
ao select, para podermos capturar seu valor
<select id="sel" class="filt...">
// ^^^^^^^^
Alteramos os values
para a idade máxima apenas, só para facilitar o if
Pegamos a idade selecionada no onchange
com
var sel = document.getElementById("sel");
var idadeMax = sel.options[sel.selectedIndex].value;
Isto é necessário, pois primeiro nós precisamos saber o índice selecionado (de 0 ao numero máximo de opções - 1 ), para podermos depois obter seu value
.
Com esta informação em idadeMax
, basicamente fazemos um
if (parseInt(idadeMax) <= idade_maxima) {
Notar o sinal de <=
e não de <
, pois a idade máxima ainda está na mesma faixa. Além disso, como pegamos a máxima como referência, temos que testar do menor valor para o maior.
Em vez de ter um <p>
para cada saída, podemos usar o mesmo, afinal só um valor será exibido por vez. Em vez de demo5
e demo6
, vamos chamar apenas de demo
.
Aplicando ao seu código:
<select id="sel" class="filtros" onchange="change_myselect(this.value)">
<option value="">Faixa etária</option>
<option class="opcoes" value="17">0 a 17 anos</option>
<option class="opcoes" value="25">18 a 25 anos</option>
<option class="opcoes" value="35">26 a 35 anos</option>
<option class="opcoes" value="999">36 ou mais</option>
<option class="opcoes" value="Desconhecido">Desconhecido</option>
</select>
<p id="demo"></p>
<script>
function change_myselect(sel) {
var person1 = {firstName:"John", lastName:"Doe", faixa_etaria: "18-25"};
var person2 = {firstName:"Angela", lastName:"Octo", faixa_etaria: "0-17"};
var sel = document.getElementById("sel");
var idadeMax = sel.options[sel.selectedIndex].value;
if (parseInt(idadeMax) <= 17) {
document.getElementById("demo").innerHTML =
person2.firstName + " está na faixa etária dos " + person2.faixa_etaria;
} else if (parseInt(idadeMax) <= 25){
document.getElementById("demo").innerHTML =
person1.firstName + " está na faixa etária dos " + person1.faixa_etaria;
} else {
document.getElementById("demo").innerHTML =
" opção invalida";
}
}
</script>
Ainda falta todo um universo de coisas...
O código acima foi para ilustrar os elementos faltantes para uma mínima aplicação de if
, else if
e else
, mas num caso real, precisa fazer algo em mais complexo. Segue uma lista de coisas a pensar para você evoluir o código:
Numa aplicação real os testes não devem depender das idades dentro do if
, o correto seria um loop avaliando o próprio objeto (que você chama de JSON, mas na verdade é só um "JSO"), afinal, se um dia for mudar a faixa de idades, você não deve precisar mexer nos if
s, e sim apenas nos dados. E no próprio objeto você deve armazenar a mínima e a máxima separadamente
Precisa ter uma maneira de armazenar a mínima e a máxima separadadmente. No seu exemplo original, tinha posto textualmente nos value
s. Tem outras maneiras de fazer isso - por exemplo em pares 18,25
e depois quebrando em duas variáveis no JS, ou mesmo usando data-min="18" data-max="25"
no HTML (pesquise por "data values" aqui mesmo no SOpt)
Para simplificar a demonstração eu criei um "bug dos mil anos de idade", que é usar 999 na terceira opção como idade máxima. Dá para fazer de maneira mais limpa
Tem uma resposta bem legal aqui neste post que mostra como pegar os valores usando JS puro: Como alterar o valor de um atributo "data" em JQuery? se quiser usar a idéia do data-min
e do data-max
em vez de value
(ou um misto das duas coisas)