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

Question

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

javascripthtmljquerycss

3

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

第一个选择表单包含颜色选项，第二个包含其他选项。

我有一些项目作为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/

- harish

你已经很好地描述了你的代码，但是你具体面临的问题是什么？ - Robo Mop

如果我从第一个选择表单中选择一个选项，它会显示正确的值，但是当我更改第二个选择表单时，它不会正确显示。请检查我的 fiddle 输出，您将更好地理解我的问题。 - harish

需要在新值上执行更改事件。https://dev59.com/EKTja4cB1Zd3GeqPA2X9 - Nathaniel Flick

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mplungjan · Accepted Answer

获取选定的值，即您要查找的类
切换同时具有这两个类的框

如果您有更多的选择条件，我们应该使用循环，但在这里我们只考虑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>