JSFiddle - React, Tailwind, and code Playground

by Alex Stupak

HTML

<select id="age_from">
<option value="0">From</option>
</select>
<select id="age_to">
<option value="100">To</option>
</select>

JavaScript

function fill(element){   
    var age_list = [];
    for (var i=1;i<100;i++){
       age_list.push(i);
    }
    $.each(age_list, function(key, value) {
        $(element)
                 .append($("<option></option>")
                 .attr("value", key+1)
                 .text(value));
        }); 
} 
fill($('#age_from'));
fill($('#age_to'));

$("#age_from").change(function(){
    $("#age_to option").each(function(i) {
        if(parseInt($("#age_from").val()) > parseInt($(this).val())) {
            $(this).hide();
        }
        else {
            $(this).show();
        }
    });
});

$("#age_to").change(function(){
    $("#age_from option").each(function() {
        if(parseInt($("#age_to").val()) < parseInt($(this).val())) {
            $(this).hide();
        }
        else {
            $(this).show();
        }
    });
});