JSFiddle - React, Tailwind, and code Playground

by JOHN_748

HTML

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
<div class="container">
    <div class="row">
      <div class="col-5">
        <select class="form-control">
            <option value="all">All</option>
          	<option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>
      </div>
      <div class="col-5">
      	<select class="form-control">
            <option value="all">All</option>
          	<option value="flower">flower</option>
            <option value="fish">fish</option>
            <option value="toy">toy</option>
        </select>
      </div>
      <div class="col-2">
      	<button id="search" class="btn btn-primary w-100">Search</button>
      </div>
      </div>
    <div class="red all flower box">Red flower</div>
    <div class="red all fish box">red fish</div>
  	<div class="green all toy box">green toy</div>
  	<div class="blue all toy box">blue toy</div>
    <div class="blue all flower box">blue flower</div>
  </div>

CSS

.box{
        color: #fff;
        padding: 20px;
        display: none;
        margin-top: 20px;
    }
    .red{ background: #ff0000; }
    .green{ background: #228B22; }
    .blue{ background: #0000ff; }

JavaScript

$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    }).change();
});