JSFiddle - React, Tailwind, and code Playground
HTML
<select id="range">
<option class="sel_range" value="all_ranges">All Ranges</option>
<option class="sel_range" value="luxury">Luxury</option>
<option class="sel_range" value="premium">Premium</option>
<option class="sel_range" value="base">Base</option>
</select>
<select id="fabric">
<option class="sel_fabric" value="all_fabrics">All Fabrics</option>
<option class="sel_fabric" value="leather">Leather</option>
<option class="sel_fabric" value="linen">Linen</option>
<option class="sel_fabric" value="cotton">Cotton</option>
</select>
<select id="colour">
<option class="sel_colour" value="all_colours">All Colours</option>
<option class="sel_colour" value="red">Red</option>
<option class="sel_colour" value="blue">Blue</option>
<option class="sel_colour" value="green">Green</option>
</select>
<ul id="fabric_options">
<li class="premium linen red">Premium Linen Red</li>
<li class="premium cotton blue">Premium Cotton Blue</li>
<li class="premium leather green">Premium Leather Green</li>
<li class="luxury linen red">Luxury Linen Red</li>
<li class="luxury cotton blue">Luxury Cotton Blue</li>
<li class="luxury leather green">Luxury Leather Green</li>
<li class="base linen red">Base Linen Red</li>
<li class="base cotton blue">Base Cotton Blue</li>
<li class="base leather green">Base Leather Green</li>
</ul>
JavaScript
$(document).ready(function() {
var range, fabric, colour;
// Range
$('.sel_range').click(function() {
range = document.getElementById("range").value;
$('.' + range).toggle("fast");
});
// Fabric
$('.sel_fabric').click(function() {
fabric = document.getElementById("fabric").value;
$('.' + fabric).toggle("fast");
});
// Colour
$('.sel_colour').click(function() {
colour = document.getElementById("colour").value;
$('.' + colour).toggle("fast");
});
});