提交后如何通过多个Select表单显示和隐藏Div

Question

我有两个带有提交按钮的选择表单，例如，我需要获取所选值的结果

首先选择具有颜色选项的表单，然后选择包含其他内容的表单。

我有一些物品作为 div....红花，红鱼。

如果我从第一种形式中选择红色，它会显示红色值 div，而在第二种形式中，如果我选择花朵，它应该只显示红色花朵，但它会显示红色值下的所有内容。只有当我提交搜索按钮时，所有这些都必须起作用。 我在下面附上了jsfiddle。 代码：

$(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. 获取选择的值，即您要查找的类
2. 切换具有这两个类的框

如果你有更多的选择标准，我们应该循环，但这里我们只看class1和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>