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

html5 • • 问答

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

第一个选择具有颜色作为选项的表单，第二个包含其他内容。

我有一些项目作为 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>
      <div>
        <select>
            <option value="all">All</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>
      </div>
      <div>
        <select>
            <option value="all">All</option>
            <option value="flower">flower</option>
            <option value="fish">fish</option>
            <option value="toy">toy</option>
        </select>
      </div>
      <div>
        <button>Search</button>
      </div>
      </div>
    <div>Red flower</div>
    <div>red fish</div>
    <div>green toy</div>
    <div>blue toy</div>
    <div>blue flower</div>

回答

  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>
  <div>
    <select>
      <option value="all">All</option>
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
    </select>
  </div>
  <div>
    <select>
      <option value="all">All</option>
      <option value="flower">flower</option>
      <option value="fish">fish</option>
      <option value="toy">toy</option>
    </select>
  </div>
  <div>
    <button>Search</button>
  </div>
</div>
<div>Red flower</div>
<div>red fish</div>
<div>green toy</div>
<div>blue toy</div>
<div>blue flower</div>

以上是提交后如何通过多个选择表单显示和隐藏Div的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容