JSFiddle - React, Tailwind, and code Playground

by thillin

HTML

<select>
    <option id="1">0 - 500</option>
    <option id="2">500 - 1000</option>
    <option id="3">1000 - 1500</option>
    <option id="4">1500 - 2000</option>
    <option id="5">2500+</option>
</select>

<ul>
    <li class="b 500">500</li>
    <li class="b 1500">1500</li>
    <li class="b 100">100</li>
    <li class="b 2500">2500</li>
    <li class="b 400">400</li>
    <li class="b 1000">1000</li>
</ul>
<div class="list"></div>

JavaScript

$("select").change(function(){
        var sel = $(this).find(":selected").attr("id");
        if (sel == "1") {
            hideClass(0, 501);
        } else if (sel == "2"){ 
            hideClass(500, 1001);       
        } else if (sel == "3"){ 
            hideClass(1000, 1501);
        } else if (sel == "4"){ 
            hideClass(1500, 2001);
        } else if (sel == "5"){ 
            hideClass(2500, 5000);
        }
});           
function hideClass(min, max) {
    $('.b').fadeOut(500);
    setTimeout(function(){
        for (var i = min; i < max; i++) {
            $('.b.' + i).fadeIn(500);       
        }
    },500);
}