JSFiddle - React, Tailwind, and code Playground

by andyface

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, range_start, range_end){   
    
    if(typeof range_start == 'undefined') {
        
        range_start = 1;
    }
    
    if(typeof range_end == 'undefined') {
        
        range_end = 100;
    }
    
    var selected = element.val();
    
    element.html(element.find('option').first());
        
    var age_list = [];
    for (var i = range_start; i < range_end; i++){
       age_list.push(i);
    }
    
    $.each(age_list, function(key, value) {
        $(element)
                 .append($("<option></option>")
                 .attr("value", value)
                 .text(value));
        });
    
    element.val(selected);
}

fill($('#age_from'));
fill($('#age_to'));

$("#age_from").change(function(){
    
    fill($('#age_to'), parseInt($("#age_from").val()), 100);
});

$("#age_to").change(function(){
    
    fill($('#age_from'), 1, parseInt($("#age_to").val()));
});