JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

HTML

<p>Filter: </p>
<select class="filterby filterA">
  <option value="all">Show All</option>
  <option value="family">Family</option>
  <option value="other">Other</option>
</select>
<p>Location: </p>
<select class="filterby filterB">
  <option value="all">All Locations</option>
  <option value="braselton">Braselton</option>
  <option value="gainesville">Gainesville</option>
</select>
<br/><br/>



<div id="FilterContainer">
  <h2>Results</h2>
  <div class="all braselton family">Katia Adams, M.D.</div>
  <div class="all gainesville other">Jody M. Bahnmiller, MD</div>

</div>

CSS

body {font-family: Arial;}
.hide {display: none;}
.show {display: block;}

JavaScript

$("select.filterby").change(function () {
  var val = $(".filterA").val() + "." + $(".filterB").val();
  alert(val)
  $("div#FilterContainer").find("div").hide();
  $("div#FilterContainer").find("div." + val).show();
});