JSFiddle - React, Tailwind, and code Playground

by Justin Breen

HTML

<div class="filter">
    <select data-filter="person">
        <option disabled selected>Select a Person</option>
        <option value="Person A">Person A</option>
        <option value="Person B">Person B</option>
        <option value="Person C">Person C</option>
        <option value="Person D">Person D</option>
        <option value="Person E">Person E</option>
    </select>

    <select data-filter="location">
        <option disabled selected>Select a Location</option>
        <option value="Boston">Boston</option>
        <option value="Providence">Providence</option>
        <option value="New York">New York</option>
    </select>
</div>

<br>
<br>

<div data-person="Person A" data-location="Providence">Person A</div>
<div data-person="Person B" data-location="Boston">Person B</div>
<div data-person="Person C" data-location="Boston, New York">Person C</div>
<div data-person="Person D" data-location="New York">Person D</div>

<div data-location="New York">Person E</div>

JavaScript

// When any filter is changed
$('[data-filter]').on('change', function () {


		// Run this code on each filter with an option selected
    $('[data-filter] option:selected:not(:disabled)').each(function () {
        var filter = $(this).parent().data('filter');
        var choice = $(this).attr('value');


        // Hide elements that are set to be filtered
    		$('[data-' + filter + ']').hide();


        // Show elements that match the filtered options
				// $(filter).is('Person B').show();

        $('[data-' + filter + '*="' + choice + '"]').show();
    });


});