How to make 2 jquery dropdown filter on multiple ids-CodePudding

How can you make 2 dropdowns that can filter a gallery. All the divs with image have multiple ids for both dropdowns, but the filter doesn't work anymore after I added a name to the id. The second dropdown didn't filter, instead everything disappeared when a option was selected.
Thanks!
The code:

<!-- the gallery -->
<div id="background">
  <div id="gallery">
    <figure id="4-5 dans" class="pic1">
      <img src="media/fotos/gallery/Dans.png" />
      <figcaption>Dans</figcaption>
    </figure>
    <figure id="4-5 beeldkunst" class="pic2">
      <img src="media/fotos/gallery/Beeldkunst.png" />
      <figcaption>Beeldkunst</figcaption>
    </figure>
    <figure id="6-8 science" class="pic3">
      <img src="media/fotos/gallery/Science.png" />
      <figcaption>Science</figcaption>
    </figure>
  </div>
</div>
<select id='filterText'>
   <option value="all"> Alle leeftijdsgroepen </option>
   <option value="4-5">4-5</option>
   <option value="6-8">6-8</option>
   <option value="8-12">8-12</option>
</select>

<select class='hoofd'>
   <option value="all"> alle hoofdcategorieën </option>
   <option value="dans">dans</option>
   <option value="science">science</option>
   <option value="beeldkunst">beeldkunst</option>
</select>

<!-- the jquery -->

$(function() {
  $("#filterText").change(function() {
    var rex = $('#filterText').val();
    if (rex != "all") $("#background figure").show().not('#'   rex).hide();
    else $("#background figure").show();
  });
});

$(function() {
  $(".hoofd").change(function() {
    var rex = $('.hoofd').val();
    if (rex != "all") $("#background figure").show().not('#'   rex).hide();
    else $("#background figure").show();
  });
});
</script>

CodePudding user response：

You can only have one ID per element, but you can indeed have more than one class. But don't have multiple class attributes; put multiple class values into one attribute

Here is the working demo hope it will help you to achieve what you want.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- the gallery -->
<div id="background">
  <div id="gallery">
    <figure id="4-5_dans" class="pic1">
      <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" />
      <figcaption>Dans</figcaption>
    </figure>
    <figure id="4-5_beeldkunst" class="pic2">
      <img src="https://pe-images.s3.amazonaws.com/basics/cc/image-size-resolution/resize-images-for-print/image-cropped-8x10.jpg" />
      <figcaption>Beeldkunst</figcaption>
    </figure>
    <figure id="6-8_science" class="pic3">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTx4Ej3sddJTqtqN48tLwfcukxY-e70Aev4Dw&usqp=CAU" />
      <figcaption>Science</figcaption>
    </figure>
  </div>
</div>
<select id='filterText'>
   <option value="all"> Alle leeftijdsgroepen </option>
   <option value="4-5_dans">4-5</option>
   <option value="4-5_beeldkunst">6-8</option>
   <option value="6-8_science">8-12</option>
</select>

<select class='hoofd'>
   <option value="all"> alle hoofdcategorieën </option>
   <option value="dans">dans</option>
   <option value="science">science</option>
   <option value="beeldkunst">beeldkunst</option>
</select>

<!-- the jquery -->
<script>
$(function() {
  $("#filterText").change(function() {
    var rex = $('#filterText').val();
    if (rex != "all") $("#background figure").show().not('#'   rex).hide();
    else $("#background figure").show();
  });
});

$(function() {
  $(".hoofd").change(function() {
    var rex = $('.hoofd').val();
      if(rex=="dans")
      {
         rex="4-5_dans";
      }else if(rex == "science")
      {
         rex="6-8_science";
      }else if(rex == "beeldkunst")
      {
        rex="4-5_beeldkunst";
      }
    if (rex != "all") $("#background figure").show().not('#'   rex).hide();
    else $("#background figure").show();
  });
});
</script>

CodePudding user response：

$(function() {
  $("#filterText").change(function() {
     var rex = $('#filterText').val();
    console.log(rex);
     switch (rex) {
        case "all":
      
      $("figure").show();
      break;
        case "4-5":
      $("figure").hide();
      $("#4-5_dans").show();
      break;
       case "6-8":
      $("figure").hide();
      $("#6-8_science").show();
      break;
       case "8-12":
      $("figure").hide();
      break;
    default:
      break;}
  });
});

$(function() {
  $(".hoofd").change(function() {
    var rex = $('.hoofd').val();
    console.log(rex);
     switch (rex) {
    case "all":
     $("figure").show();
      break;
        case "dans":
      $("figure").hide();
      $("#4-5_dans").show();
      break;
       case "science":
      $("figure").hide();
      $("#6-8_science").show();
      break;
       case "beeldkunst":
      $("figure").hide();
      $("#4-5_beeldkunst").show();
      break;
    default:
      break;
  }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- the gallery -->
<div id="background">
  <div id="gallery">
    <figure id="4-5_dans" class="pic1 ">
      <img src="https://images.unsplash.com/photo-1593642532842-98d0fd5ebc1a?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=60" height="40px" />
      <figcaption>Dans</figcaption>
    </figure>
    <figure id="4-5_beeldkunst" class="pic2 ">
      <img src="https://images.unsplash.com/photo-1634076904466-66cf4faeaf03?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw=&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=60" height="40px" height="40px" />
      <figcaption>Beeldkunst</figcaption>
    </figure>
    <figure id="6-8_science" class="pic3 ">
      <img src="https://images.unsplash.com/photo-1633993364598-50b082282d88?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHw=&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=60" height="40px" />
      <figcaption>Science</figcaption>
    </figure>
  </div>
</div>
<select id='filterText'>
   <option value="all"> Alle leeftijdsgroepen </option>
   <option value="4-5">4-5</option>
   <option value="6-8">6-8</option>
   <option value="8-12">8-12</option>
</select>

<select class='hoofd'>
   <option value="all"> alle hoofdcategorieën </option>
   <option value="dans">dans</option>
   <option value="science">science</option>
   <option value="beeldkunst">beeldkunst</option>
</select>
<!-- Hi bro i hope this help you ,in your code issue you use id and id is unique you can not put space in id  -->
<!-- the jquery -->