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

$('[data-filter]').on('change', function () {

		var val = [];

    $('select option:selected:not(:disabled)').each(function () {
        val.push(this.value);
    });

    alert(val);

});