JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<h1>Vehicles List</h1>

<select style="margin: 0 0 20px 0;">
    <option value="typeAll">- Filter by Type -</option>
    <option value="Cars">Cars</option>
    <option value="Trucks">Trucks</option>
    <option value="Motorcyles">Motorcyles</option>
    <option value="Hybrids">Hybrids</option>
</select>

<article class="typeAll Cars">Car 51</article>
<article class="typeAll Cars">Car 27</article>
<article class="typeAll Cars Hybrids">Car 35 (Hybrid)</article>
<article class="typeAll Trucks">Truck 23</article>
<article class="typeAll Trucks Hybrids">Truck 51 (Hybrid)</article>
<article class="typeAll Motorcyles">Motorcyle 14</article>
<article class="typeAll Motorcyles">Motorcyle 56</article>
<article class="typeAll Motorcyles">Motorcyle 96</article>

JavaScript

$('select').on('change', function (e) {

        var selector = "."+$(this).val();
        console.log(selector); 
       
        var all = $('article[class]');
        if(selector.length)
          all.hide().filter(selector).show();
        else all.show();
    });