What you need in your case is the application of a if conventional using Javascript itself.
First of all, some adjustments made to your code (modifying some parts purposely so you see more possibilities).
We gave a id to select, so that we can capture its value
<select id="sel" class="filt...">
// ^^^^^^^^
We change the values for maximum age only, only to facilitate the if
We got the selected age on onchange with
var sel = document.getElementById("sel");
var idadeMax = sel.options[sel.selectedIndex].value;
This is necessary, because first we need to know the selected index (from 0 to the maximum number of options - 1 ), in order to then obtain your value.
With this information in idadeMax, basically we make a
if (parseInt(idadeMax) <= idade_maxima) {
Notice the sign of <= and not of <, because the maximum age is still in the same range. Also, as we take the maximum as reference, we have to test from the lowest value to the highest.
Instead of having a <p> for each output, we can use the same, after all only one value will be displayed at a time. Instead of demo5 and demo6, let’s just call it demo.
Applying to your code:
<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>
There’s still a whole universe of things missing...
The above code was to illustrate the missing elements for a minimal application of if, else if and else, but in a real case, you need to do something more complex. Here is a list of things to think about for you to evolve the code:
In a real application the tests should not depend on the ages within the if, the correct one would be a loop evaluating the object itself (which you call JSON, but in fact it is only a "JSO"), after all, if one day will change the age range, you should not need to touch the ifs, and yes only in the data. And in the object itself you must store the minimum and maximum separately
It needs to have a way of storing the minimum and maximum separately. In his original example, he had textually put us values. There are other ways to do this - for example in pairs 18,25 and then breaking into two variables in JS, or even using data-min="18" data-max="25" in HTML (search for "data values" right here in Sopt)
To simplify the demo I created a "thousand-year-old bug", which is to use 999 in the third option as the maximum age. You can do it cleaner
There’s a really cool answer here in this post that shows you how to get the values using pure JS: To change the value of a "date" attribute in Jquery? if you want to use the idea of data-min and of data-max instead of value (or a mixture of the two)
Mt good.........
– Sam