JSFiddle - React, Tailwind, and code Playground
HTML
Kleur:
<select name="selFruitColor" class="keuze" id="fruitColor">
<option value="">Any Color</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
Type:
<select name="selFruitType" class="keuze" id="fruitType">
<option value="">Any Type</option>
<option value="fruit">Fruit</option>
<option value="berry">Berry</option>
</select>
<div class="1">
<h1>DIV 1</h1>
<ul>
<li class="item fruit">Apple</li>
<li class="item blue fruit">Grape</li>
<li class="item yellow fruit">Lemon</li>
<li class="item fruit">Cherry</li>
<li class="item yellow fruit">Banana</li>
<li class="item berry">Strawberry</li>
<li class="item blue berry">Blueberry</li>
<li class="item berry">Raspberry</li>
<li class="item yellow fruit">Pineapple</li>
<li class="item yellow berry">Yellowberry</li>
</ul>
</div>
<div class="2">
<h1>DIV 2</h1>
<ul>
<li class="item red fruit">Apple</li>
<li class="item blue fruit">Grape</li>
<li class="item yellow fruit">Lemon</li>
<li class="item red fruit">Cherry</li>
<li class="item yellow fruit">Banana</li>
<li class="item red berry">Strawberry</li>
<li class="item blue berry">Blueberry</li>
<li class="item red berry">Raspberry</li>
<li class="item yellow fruit">Pineapple</li>
<li class="item yellow berry">Yellowberry</li>
</ul>
</div>
CSS
body
{
font-family: Arial;
font-size: 1em;
color: #000;
}
ul
{
width: 10em;
list-style-type: none;
}
li
{
padding: 0.5em;
}
.blue
{
background-color: #99f
}
.red
{
background-color: #f99
}
.yellow
{
background-color: #ff9
}
JavaScript
$(document).ready(function () {
$('select.keuze').change(function () {
var fruitColor = $("#fruitColor").val() || "item",
fruitType = $("#fruitType").val() || "item";
$(".item").hide().filter(function() {
return $(this).hasClass(fruitColor) && $(this).hasClass(fruitType);
}).show();
});
});