JSFiddle - React, Tailwind, and code Playground

by SO_AMK

HTML

<select id="genre" name="genre">
        <option value="">Select Genre</option>
        <option value="modern">Modern</option>
        <option value="impressionist">Impressionist</option>
    </select>
    
    <select id="size" name="size">
      <option value="">Select Size</option>
      <option value="small">Small</option>
      <option value="medium">Medium</option>
      <option value="large">Large</option>
    </select>


  <div id="paintings">
      <div class="eaPaintDiv impressionist medium" >
      </div>
 
      <div class="eaPaintDiv modern medium">
      </div>
    
      <div class="eaPaintDiv impressionist large">
      </div>
    
      <div class="eaPaintDiv impressionist small">
      </div>
       
      <div class="eaPaintDiv impressionist medium" >
      </div>
 
      <div class="eaPaintDiv modern medium">
      </div>
    
      <div class="eaPaintDiv impressionist large">
      </div>
    
      <div class="eaPaintDiv impressionist small">
      </div>
      
      <div class="error">
          Error: No paintings match the selected criteria!
      </div>
    </div>

CSS

.error {
    display: none;
}
#paintings {
    width: 430px; 
    background-color: #F00;
}
#paintings:after {
    display: block;
    content: " ";
    height: 0;
    clear: both;
}
.eaPaintDiv  {
    display: block;
    float: left;
    margin: 3px;
    height: 100px;
    width: 100px;
    background-color: #000;
}

JavaScript

$(document).ready(function() {
    $("#genre").change(function() {
        var selGenre = $(this).val();
        var selSize = $("#size").val();
        $("#paintings").slideUp(function() {
            $('.eaPaintDiv, .error').hide();
            $('.eaPaintDiv[class*=' + selGenre + '][class*=' + selSize + ']').show();
            if ($('.eaPaintDiv[class*=' + selGenre + '][class*=' + selSize + ']').length == 0) {
                $(".error").show();
            }
            $("#paintings").slideDown();
        });
    });
    $("#size").change(function() {
        var selGenre = $("#genre").val();
        var selSize = $(this).val();
        $("#paintings").slideUp(function() {
            $('.eaPaintDiv, .error').hide();
            $('.eaPaintDiv[class*=' + selSize + '][class*=' + selGenre + ']').show();
            if ($('.eaPaintDiv[class*=' + selSize + '][class*=' + selGenre + ']').length == 0) {
                $(".error").show();
            }
            $("#paintings").slideDown();
        });
    });
});