Filter:checkbox 和 select 框匹配 javascript

Question

我有 3 个不同的过滤器部分。

动物（有五个复选框）
技术或商业（有两个复选框）
部门（有 95 个选项的选择框）*

这些应该是匹配的。我过滤了但是，只是在第一部分和第二部分之间。

我添加了第三部分，但事实并非如此。

我该如何解决这个问题？注意：过滤&匹配要带Class.

这是 link 到 All editable codes 的代码笔 .

<!-- FORMS -->
<div class="orangeborder selectors row">
  <!-- Left side checkboxes, five -->
  <div class="col-md-6">
    <h2 class="darkgray">mon/mes esp&egrave;ce(s) :</h2>
    <div class="allanimals">
      <div class="col-md-2 col-xs-6 animalcontainer petcontainer">
        <div class="animal"><img id="pet" src="/Zoetis/cpt_internal/507498" caption="false" width="66" height="45" /></div>
        <input type="checkbox" name="species" value="pet" class="pet-h species" onclick="changeImgPet()" /></div>
      <div class="col-md-2 col-xs-6 animalcontainer cattlecontainer">
        <div class="animal"><img id="cattle" src="/Zoetis/cpt_internal/507496" caption="false" width="63" height="48" /></div>
        <input type="checkbox" name="species" value="cattle" class="cattle-h species" onclick="changeImgCattle()" /></div>
      <div class="col-md-2 col-xs-6 animalcontainer equinecontainer">
        <div class="animal"><img id="equine" src="/Zoetis/cpt_internal/507497" caption="false" width="61" height="48" /></div>
        <input type="checkbox" name="species" class="equine-h species" value="equine" onclick="changeImgEquine()" /></div>
      <div class="col-md-2 col-xs-6 animalcontainer swinecontainer">
        <div class="animal"><img id="swine" src="/Zoetis/cpt_internal/507500" caption="false" width="58" height="40" /></div>
        <input type="checkbox" name="species" class="swine-h species" value="swine" onclick="changeImgSwine()" /></div>
      <div class="col-md-2 col-xs-6 animalcontainer poultrycontainer">
        <div class="animal"><img id="poultry" src="/Zoetis/cpt_internal/507499" caption="false" width="58" height="49" /></div>
        <input type="checkbox" name="species" class="poultry-h species" value="poultry" onclick="changeImgPoultry()" /></div>
    </div>
  </div>
    <!-- Right side checkboxes and select box -->
  <div class="col-md-6">
    <!-- Checkboxes -->
    <div class="row">
      <h2 class="darkgray">mon besoin :</h2>
      <div class="col-md-6"><input type="checkbox" name="need" class="commercial need" value="commercial" />
        <p class="inputtext">Renseignements Commerciaux</p>
      </div>
      <div class="col-md-6"><input type="checkbox" name="need" class="technique need" value="technique" />
        <p class="inputtext">Renseignements Techniques</p>
      </div>
    </div>
        <!-- Select box -->
    <div class="row">
      <h2 class="darkgray">mon d&eacute;partement :</h2>
      <div class="form-input">
        <div class="form-single-column">
          <select onchange="this.className=this.options[this.selectedIndex].className" id="selectDepartment" name="department" class="selectDepartment">
            <option class="placeholder" id="0" selected="selected">S&eacute;lectionner</option>
            <option id="1" value="1">1</option>
            <option id="2" value="2">2</option>
            <option id="3" value="3">3</option>
            <option id="4" value="4">4</option>
            <option id="5" value="5">5</option>
            </select></div>
      </div>
      <div class="submitbutton">
<p>Valider&nbsp;&nbsp;<i class="fa fa-caret-right"></i></p>
</div>
      <a class="hidden" onclick="reset()"></a></div>
  </div>
</div>


<!-- RESULTS -->
<!-- One result = One div -->
<div id="results" class="row results">
  <div class="44 49 37 86 85 79 17 16 87 23 19 24 46 33 47 40 64 47 32 65 82 31 9 81 11 66 cattle commercial col-md-6">
    <h2>Mathieu Le Jolu</h2>
    <p>Directeur Commercial</p>
    <p>D&eacute;partement: 44, 49, 37, 86, 85, 79, 17, 16, 87, 23, 19, 24, 46, 33, 47, 40, 64, 47, 32, 65, 82, 31, 9, 81, 11, 66</p>
    <p>T&eacute;l&eacute;phone: 06 98 05 33 93</p>
    <p>Adresse email: <a href="mailto:mathieu.lejolu@zoetis.com">mathieu.lejolu@zoetis.com</a></p>
  </div>
  <div class="85 79 17 16 cattle commercial col-md-6">
    <h2>Maud L&rsquo;HERMINE</h2>
    <p>Responsable Compte Client</p>
    <p>D&eacute;partement: 85, 79, 17, 16</p>
    <p>T&eacute;l&eacute;phone: 06.32.32.15.97</p>
    <p>Adresse email: <a href="mailto:maud.lhermine@zoetis.com">maud.lhermine@zoetis.com</a></p>
  </div>
  <div class="85 79 17 16 cattle commercial col-md-6">
    <h2>Philippe QUERE</h2>
    <p>Responsable Compte Client</p>
    <p>D&eacute;partement: 85, 79, 17, 16</p>
    <p>T&eacute;l&eacute;phone: 06.08.02.72.71</p>
    <p>Adresse email: <a href="mailto:philippe.quere@zoetis.com">philippe.quere@zoetis.com</a></p>
  </div>
  <div class="37 79 85 86 22 35 53 16 17 24 44 49 33 47 32 40 65 65 29 56 pet commercial col-md-6">
    <h2>RAFFI DEMIRDJIAN</h2>
    <p>Directeur Commercial</p>
    <p>D&eacute;partement: 37, 79, 85, 86, 22, 35, 53, 16, 17, 24, 44, 49, 33, 47, 32, 40, 65, 65, 29, 56</p>
    <p>T&eacute;l&eacute;phone: 06 75 32 06 01</p>
    <p>Adresse email: <a href="mailto:raffi.demirdjian@zoetis.com">raffi.demirdjian@zoetis.com</a></p>
  </div>
  <div class="16 17 24 pet commercial col-md-6">
    <h2>Laurence RICHARD</h2>
    <p>Responsable Compte Client</p>
    <p>D&eacute;partement: 16, 17, 24</p>
    <p>T&eacute;l&eacute;phone: 06 49 08 89 23</p>
    <p>Adresse email: <a href="mailto:laurence.richard@zoetis.com">laurence.richard@zoetis.com</a></p>
  </div>
  <div class="37 79 85 86 22 35 53 16 17 24 44 49 33 47 32 40 65 29 56 pet commercial col-md-6">
    <h2>Arnaud DE CLERCQ</h2>
    <p>DSS</p>
    <p>D&eacute;partement: 37, 79, 85, 86, 22, 35, 53, 16, 17, 24, 44, 49, 33, 47, 32, 40, 65, 29, 56</p>
    <p>T&eacute;l&eacute;phone: 06 30 85 68 43</p>
    <p>Adresse email: <a href="mailto:arnaud.declercq@zoetis.com">arnaud.declercq@zoetis.com</a></p>
  </div>
  <div class="37 79 85 86 22 35 53 16 17 24 44 49 33 47 32 40 65 29 56 pet technique col-md-6">
    <h2>Aur&eacute;lie Billot</h2>
    <p>Conseiller Technique R&eacute;gional</p>
    <p>D&eacute;partement: 37, 79, 85, 86, 22, 35, 53, 16, 17, 24, 44, 49, 33, 47, 32, 40, 65, 29, 56</p>
    <p>T&eacute;l&eacute;phone: 06 43 37 17 34</p>
    <p>Adresse email: <a href="mailto:aurelie.billot@zoetis.com">aurelie.billot@zoetis.com</a></p>
  </div>
  <div class="37 79 85 86 22 35 53 16 17 24 44 49 33 47 32 40 65 29 56 pet technique col-md-6">
    <h2>Julien Mariette</h2>
    <p>DSS</p>
    <p>D&eacute;partement: 37, 79, 85, 86, 22, 35, 53, 16, 17, 24, 44, 49, 33, 47, 32, 40, 65, 29, 56</p>
    <p>T&eacute;l&eacute;phone: 07 84 39 76 72</p>
    <p>Adresse email: <a href="mailto:aurelie.billot@zoetis.com">julien.mariette@zoetis.com</a></p>
  </div>
  <div class="37 79 85 86 22 35 53 16 17 24 44 49 33 47 32 40 65 29 56 pet technique col-md-6">
    <h2>Benjamin Leman</h2>
    <p>Responsable Grand Compte</p>
    <p>D&eacute;partement: 37, 79, 85, 86, 22, 35, 53, 16, 17, 24, 44, 49, 33, 47, 32, 40, 65, 29, 56</p>
    <p>T&eacute;l&eacute;phone: 07 76 97 82 98</p>
    <p>Adresse email: <a href="mailto:aurelie.billot@zoetis.com">benjamin.leman@zoetis.com</a></p>
  </div>
  <div class="37 79 85 86 22 35 53 16 17 24 44 49 33 47 32 40 65 29 56 pet technique col-md-6">
    <h2>Valentine Vignon</h2>
    <p>Conseiller Technique R&eacute;gional</p>
    <p>D&eacute;partement: 37, 79, 85, 86, 22, 35, 53, 16, 17, 24, 44, 49, 33, 47, 32, 40, 65, 29, 56</p>
    <p>T&eacute;l&eacute;phone: 06 29 47 25 81</p>
    <p>Adresse email: <a href="mailto:aurelie.billot@zoetis.com">valentine.vignon@zoetis.com</a></p>
  </div>
  <div class="62 59 2 76 80 60 27 8 51 77 10 52 21 55 54 57 67 88 70 90 68 25 cattle commercial col-md-6">
    <h2>Pierre Carpentier</h2>
    <p>Directeur Commercial</p>
    <p>D&eacute;partement: 62, 59, 2, 76, 80, 60, 27, 8, 51, 77, 10, 52, 21, 55, 54, 57, 67, 88, 70, 90, 68, 25</p>
    <p>T&eacute;l&eacute;phone: 06 80 52 52 38</p>
    <p>Adresse email: <a href="mailto:pierre.carpentier@zoetis.com">pierre.carpecommercialntier@zoetis.com</a></p>
  </div>
  <div class="cattle commercial col-md-6">
    <h2>Simon Bourdon</h2>
    <p>Responsable Grand Compte</p>
    <p>D&eacute;partement: </p>
    <p>T&eacute;l&eacute;phone: 06 49 08 87 57</p>
    <p>Adresse email: <a href="mailto:simon.bourdon@zoetis.com">simon.bourdon@zoetis.com</a></p>
  </div>
  <div class="cattle commercial col-md-6">
    <h2>Maxime Bethembos</h2>
    <p>Responsable Grand Compte</p>
    <p>D&eacute;partement: </p>
    <p>T&eacute;l&eacute;phone: 07 72 21 62 70</p>
    <p>Adresse email: <a href="mailto:maxime.bethembos@zoetis.com">maxime.bethembos@zoetis.com</a></p>
  </div>
  <div class="62 59 2 cattle commercial col-md-6">
    <h2>Hervé Plouchart</h2>
    <p>Responsable Compte Client</p>
    <p>D&eacute;partement: 62, 59, 2</p>
    <p>T&eacute;l&eacute;phone: 06 73 37 06 05</p>
    <p>Adresse email: <a href="mailto:herve.plouchart@zoetis.com">herve.plouchart@zoetis.com</a></p>
  </div>
</div>





//  Start - This code is for checkboxes filtering and matching
$(document).ready(function() {
  var $results = $("#results div").hide(); //hides kind content in the beginning

  var $checks = $('input[type="checkbox"]').change(function() {
    if ($checks.filter(":checked").length) {
      //use the types to gilter them
      var $selected = filter($results, ".species");
      $selected = filter($selected, ".need");
      $selected.show();
      $results.not($selected).hide();
    } else {
      $results.hide();
    }
  });

  function filter($src, type) {
    var selection = $checks
      .filter(type + ":checked")
      .map(function() {
        return "." + this.value;
      })
      .get();
    console.log(type, $src, selection);
    return selection.length ? $src.filter(selection.join(",")) : $src;
  }
});
$(document).ready(function() {
  $(".pet-h, .cattle-h, .equine-h, .swine-h, .poultry-h").click(function() {
    $("#results").hide();
  });
  $(".submitbutton").click(function() {
    $("#results").show();
  });
});
//  End - This code is for checkboxes filtering and matching


//  Start - This code is for select box
jQuery(document).ready(function($) {
  $(".1,.2,.3").hide();
  $(".submitbutton").click(function() {
    var selectedID = $("#selectDepartment")
      .children(":selected")
      .attr("id");
    if (selectedID != "0") {
      $(".1,.2,.3").hide();
      $("." + selectedID + "").show();
    }
  });
});
//  End - This code is for select box


//  Start - This code is for animals' hover border
$(document).ready(function() {
  $(".pet-h").click(function() {
    if ($(".pet-h").is(":checked")) {
      $(".petcontainer").addClass("animalborder");
    } else {
      $(".petcontainer").removeClass("animalborder");
    }
  });

  $(".cattle-h").click(function() {
    if ($(".cattle-h").is(":checked")) {
      $(".cattlecontainer").addClass("animalborder");
    } else {
      $(".cattlecontainer").removeClass("animalborder");
    }
  });

  $(".equine-h").click(function() {
    if ($(".equine-h").is(":checked")) {
      $(".equinecontainer").addClass("animalborder");
    } else {
      $(".equinecontainer").removeClass("animalborder");
    }
  });

  $(".swine-h").click(function() {
    if ($(".swine-h").is(":checked")) {
      $(".swinecontainer").addClass("animalborder");
    } else {
      $(".swinecontainer").removeClass("animalborder");
    }
  });

  $(".poultry-h").click(function() {
    if ($(".poultry-h").is(":checked")) {
      $(".poultrycontainer").addClass("animalborder");
    } else {
      $(".poultrycontainer").removeClass("animalborder");
    }
  });
});
//  End - This code is for animals' hover border


//  Start - This code is for animals' image changing
function changeImgPet() {
  var image = document.getElementById("pet");
  if (
    image.src.match(
      "http://stagefr.ztsaccess.com/_locale-assets/connexion/color-pets.png"
    )
  ) {
    image.src =
      "http://stagefr.ztsaccess.com/_locale-assets/connexion/pets.png";
  } else {
    image.src =
      "http://stagefr.ztsaccess.com/_locale-assets/connexion/color-pets.png";
  }
}
function changeImgCattle() {
  var image = document.getElementById("cattle");
  if (
    image.src.match(
      "http://stagefr.ztsaccess.com/_locale-assets/connexion/color-cattle.png"
    )
  ) {
    image.src =
      "http://stagefr.ztsaccess.com/_locale-assets/connexion/cattle.png";
  } else {
    image.src =
      "http://stagefr.ztsaccess.com/_locale-assets/connexion/color-cattle.png";
  }
}
function changeImgEquine() {
  var image = document.getElementById("equine");
  if (
    image.src.match(
      "http://stagefr.ztsaccess.com/_locale-assets/connexion/color-horses.png"
    )
  ) {
    image.src =
      "http://stagefr.ztsaccess.com/_locale-assets/connexion/equine.png";
  } else {
    image.src =
      "http://stagefr.ztsaccess.com/_locale-assets/connexion/color-horses.png";
  }
}
function changeImgSwine() {
  var image = document.getElementById("swine");
  if (
    image.src.match(
      "http://stagefr.ztsaccess.com/_locale-assets/connexion/color-pigs.png"
    )
  ) {
    image.src =
      "http://stagefr.ztsaccess.com/_locale-assets/connexion/swine.png";
  } else {
    image.src =
      "http://stagefr.ztsaccess.com/_locale-assets/connexion/color-pigs.png";
  }
}
function changeImgPoultry() {
  var image = document.getElementById("poultry");
  if (
    image.src.match(
      "http://stagefr.ztsaccess.com/_locale-assets/connexion/color-poultry.png"
    )
  ) {
    image.src =
      "http://stagefr.ztsaccess.com/_locale-assets/connexion/poultry.png";
  } else {
    image.src =
      "http://stagefr.ztsaccess.com/_locale-assets/connexion/color-poultry.png";
  }
}
//  End - This code is for animals' image changing

Answer 1

试试这个来选择部门

var selectedID=$("#selectDepartment").val();

~~var selectedID = $("#selectDepartment").children(":selected").attr("id");~~

codepen.io/anon/pen/MMMMOE?editors=1010

Filter:checkbox 和 select 框匹配 javascript

Filter:checkbox and select box matching javascript

javascript

checkbox

filter

dropdown

jquery-isotope