Question

<form id="xyz" class="checkbox-form">
    <input class="chk" type="checkbox" id="a" value="">
    <label for="a" class="checkbox-inline">Apple</label>

    <input class="chk" type="checkbox" id="b" value="">
    <label for="b" class="checkbox-inline">Banana</label>

    <input class="chk" type="checkbox" id="c" value="" >
    <label for="c" class="checkbox-inline">Carrot</label>

    <select name="Select Shop" id="shoplist">
        <option value="s01">shop1<option>
        <option value="s02">shop2<option>
        <option value="s03">shop3<option>
    </select>

    <select name="Select City" id="citylist">
        <option value="c01">city1<option>
        <option value="c02">city2<option>
        <option value="c03">city3<option>
    </select> 
</form>
<div class="a b city1 shop2">xyz...<div>
<div class="c b city2 shop1">xyz...<div>
<div class="a c city3 shop1">xyz...<div>
<div class="b a city2 shop2">xyz...<div>

现在我想只显示那些在表单中选择了上述类的div。例如。我想显示带有类a，c的div和从下拉列表中选择的city3和shop1。然后它隐藏所有div并只显示第三个

Answer 1

在这里你应该给div的所有类都显示none，除了样式和静态类的主类。所以将你的div改为

<div class="a b city1 shop2 a-static b-static city1-static shop2-static mainStyleClass">xyz...<div>

此处a，b，city1和shop2应显示无，一旦这些类被以下代码删除，div就会开始显示。< / p>

复选框的示例方法。下拉应该很容易在类似的行上。

$('.checkbox-inline').change(function() {
    if(this.checked) {
        $('div.' + $(this).text()).removeClass($(this).text());
    }
    else {
        $('div.' + $(this).text() + '-static').addClass($(this).text());
    }
});

Answer 2

首先，您需要正确关闭div标签。

然后，可以按照以下逻辑得到所需的结果：

根据复选框获取课程列表，然后选择输入选择。
隐藏所有div
显示包含所有这些所选类的div，并且类的数量与所选类相同。

检查以下代码。希望这有帮助！

$(document).ready(function() {
  $("div").hide();
  var elems = $('.chk,#citylist,#shoplist');
  elems.on('change', function() {
    var arr = [];
    $.each(elems, function(i, e) {
      var elem = $(e);
      var val;
      if (elem.is("select")) {
        val = elem.find("option:selected").text();
      } else if (elem.is("input[type='checkbox']")) {
        val = elem.is(":checked") ? elem.attr("id") : "";
      }

      if (val) {
        arr.push(val);
      }

    });

    $.each($("div"), function(i, e) {
      var hasCl = true;
      $.each(arr, function(k, c) { 
        if (!$(e).hasClass(c)) {
          hasCl = false;
        }
      });
      if (hasCl) {
        $(e).show();
      } else {
        $(e).hide();
      }
    });

  });
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<form id="xyz" class="checkbox-form">
  <input class="chk" type="checkbox" id="a" value="">
  <label for="a" class="checkbox-inline">Apple</label>

  <input class="chk" type="checkbox" id="b" value="">
  <label for="b" class="checkbox-inline">Banana</label>

  <input class="chk" type="checkbox" id="c" value="">
  <label for="c" class="checkbox-inline">Carrot</label>

  <select name="Select Shop" id="shoplist">
        <option value="s01">shop1<option>
        <option value="s02">shop2<option>
        <option value="s03">shop3<option>
    </select>

  <select name="Select City" id="citylist">
        <option value="c01">city1<option>
        <option value="c02">city2<option>
        <option value="c03">city3<option>
    </select>
</form>

<div class="a b city1 shop2">xyz...1</div>
<div class="c b city2 shop1">xyz...2</div>
<div class="a c city3 shop1">xyz...3</div>
<div class="b a city2 shop2">xyz...4</div>

P.S。：预计会在问题中添加您尝试过的代码！

类更改选择下拉列表和复选框

2 个答案: