How to show and hide Div by mutiple Select form after submission

Question

I have two select form with submit button, I need to get the result of selected value for example

first select form having colours as an option and second contains another things.

and i have some items as div....red flower , red fish.

if i select red from first form its shows red value div and in second form if i select flower it should display red flower only but it's shows everything under the value red. And these all thing must work only when i submit the search button. I have attached jsfiddle below. Code:

$(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();
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Jsfiddle :

https://jsfiddle.net/JOHN_748/v846oeab/1/

Answer 1

1. get the select's values which are the classes you are looking for
2. toggle the boxes that have both classes

If you have more selection criteria, we should loop, but here we just look at class1 and class2

$(function() {
  const $sels = $("select");
  const $boxes = $(".box");
  $("#search").on("click", function() {
    const vals = $sels.map(function() { return this.value }).get()
    $boxes.each(function() { 
      const show = $(this).hasClass(vals[0]) && $(this).hasClass(vals[1]);
      $(this).toggle(show) 
    });
  }).click();
});

.box {
  color: #fff;
  padding: 20px;
  display: none;
  margin-top: 20px;
}

.red {
  background: #ff0000;
}

.green {
  background: #228B22;
}

.blue {
  background: #0000ff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>