JSFiddle - React, Tailwind, and code Playground

HTML

Kleur: 
<select name="selFruitColor" class="keuze" id="fruitColor">
    <option value="all">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="all">Any Type</option>
    <option value="fruit">Fruit</option>
    <option value="berry">Berry</option>
</select>

<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>

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(myFunction);

    function myFunction() {
        var fruitColor = $("#fruitColor").val();
        var fruitType = $("#fruitType").val();
        var fruitColorSelector = '';
        var fruitTypeSelector = '';

        if (fruitColor == "all" && fruitType == "all") {
            $(".item").show();
        } else {
            if (fruitType != "all") {
                fruitTypeSelector = '.' + fruitType
            }

            if (fruitColor != "all") {
                fruitColorSelector = '.' + fruitColor
            }

            $(".item").hide();
            $(fruitTypeSelector + fruitColorSelector).show();
        }

    };

});