JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<select class="office">
    <option value="">Office</option>
    <option value="kent">Kent</option>
    <option value="london">London</option>
    <option value="toronto">Toronto</option>
</select>
<select class="department">
    <option value="">Department</option>
    <option value="accounting">Accounting</option>
    <option value="it">IT</option>
</select>
<div class="kent accounting profile">kent accounting</div>
<div class="london accounting profile">london accounting</div>
<div class="toronto accounting profile">toronto accounting</div>
<div class="kent it profile">kent it</div>
<div class="london it profile">london it</div>
<div class="toronto it profile">toronto it</div>
<div>
    <h2>Instructions</h2>
    <p>Each profile should have a container that has classes of it's office and department in lower case as well as a class of profile. Then you add option values to your select that match the office names and departments exactly, also lower case. There should be an "all" or some other sort of top level selection on the selects that has a null value, this is so that you can revert to all without reloading the page.</p>
    <p>After setting up those two things you never have to change the JS, you can just add more offices and departments at will because the JS depends on the classes and select values to do it's work.</p>

CSS

body{
    font-family:sans-serif;
}
.profile{
    width:150px;
    margin:5px;
    padding:10px;
    background-color:red;
    color:#FFF;
    text-align:center;
}
.accounting{
    background-color:green;
}
select{
    display:block;
    width:150px;
    margin:5px;
}

JavaScript

$(document).ready(function(){
    $("select").on("change",function(){
        $(".profile").show();
        $("select").each(function(){
            $value = $(this).val();
            if($value){
                $(".profile:not(."+$value+")").hide();
            }
        });
    });
});