JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

HTML

<label style="width:50%;">Find a provider by Specialty
                        <select class="searchfilter specialties highlight">
                            <option value="all">All Specialties</option>
                                                        <option value="allergy-and-asthma"> Allergy and Asthma </option>
                                                        <option value="bariatric-metabolic-institute"> Bariatric &amp; Metabolic Institute </option>
                                                        <option value="cardiovascular-thoracic-surgery"> Cardiovascular &amp; Thoracic Surgery </option>
                                                        <option value="critical-care"> Critical Care </option>
                                                        <option value="family-medicine"> Family Medicine </option>
                                                        <option value="general-surgery"> General Surgery </option>
                                                        <option value="gynecologic-oncology"> Gynecologic Oncology </option>
                                                        <option value="heartburn-swallowing"> Heartburn &amp; Swallowing </option>
                                                        <option value="infectious-disease"> Infectious Disease </option>
                                                        <option value="inpatient-medicine"> Inpatient Medicine </option>
                                                        <option value="internal-medicine"> Internal Medicine </option>
                                                        <option value="neurology"> Neurology </option>
                                                        <option value="neurosurgery"> Neurosurgery </option>
                                                        <option value="ob-gyn"> OB/GYN </option>
                                                        <option value="occupational-medicine">...

CSS

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

JavaScript

$("select.filterby").change(function () {
  var parameters = "." + $(".filterA").val() + "." + $(".filterB").val();
  console.log(parameters);
  $(".searchable .item").hide();
  $(".searchable .item" + parameters).show();
});