I’ve been racking my head for a while now, I’m starting to think there is no way of actually doing this, Basically what I want to accomplish, Is so you can select from two dropdowns and they will show/hide divs but the selects need to work together.

Here is what I have so far below

$(document).ready(function() {
    $('select.filter-case').on("change", function() {
        var value = $(this).val();
        if(value == "default") {
            $(".systemfilter").css("display", "inline");
            $(".boxes").removeClass("systemfilter");
        } else {
            $(".boxes").addClass("systemfilter");
            $(".systemfilter").css("display", "none");
            $("."+value).css("display", "block");
        }
    });
    $('select.filter-case-locations').on("change", function() {
        var value = $(this).val();
        if(value == "default") {    
            $(".location").css("display", "inline");
            $(".boxes").removeClass("location");
        } else {
            $(".boxes").addClass("location");
            $(".location").css("display", "none");
            $("."+value).css("display", "block");
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="filter-case">

<option selected="" value="default">system</option>
  <option value="system_categories-system01">system01</option>
  <option value="system_categories-system02">system02</option>
  <option value="system_categories-system03">system03</option>
  <option value="system_categories-system04">system04</option>
  <option value="system_categories-system05">system05</option>
  <option value="system_categories-system06">system06</option>
  <option value="system_categories-system07">system07</option>
  <option value="system_categories-system08">system08</option>
</select>

<select class="filter-case-locations">
<option selected="" value="default">Location</option>
<option value="locaton_categories-essex">Essex</option>
<option value="locaton_categories-greenhithe">Kent</option>
<option value="locaton_categories-kent">Kent</option>
<option value="locaton_categories-london">London</option>
<option value="locaton_categories-sussex">Sussex</option>
</select>

<div class="boxes locaton_categories-essex system_categories-system04"><h3>Essex System04</div>
<div class="boxes locaton_categories-essex system_categories-system02"><h3>Essex System02</div>
<div class="boxes locaton_categories-greenhithe system_categories-system04"><h3>Essex System06</div>
<div class="boxes locaton_categories-greenhithe system_categories-system04"><h3>Essex System04</div>
<div class="boxes locaton_categories-london system_categories-system04"><h3>London System03</div>

I want the drop downs to work independently. I just can’t think how to make it work. I added classes because I thought it might be possible, to do something with those, maybe work out a if statement, but I’ve got no where.

Summery: What I Want is if someone selects System 01 for example then selects Kent. It will show all the system 01 in Kent. But if someone just selects a location and no system it still show all the locations.

Hope that makes sense. Thanks In advance

Answer

So I sat down, Had a cup of tea, cookies, And I realised id been the dumbest dev to have ever walked this earth.

I was using two drop downs but not using them in the same function …. Once I realised that it was easy 😀

    $(function() {
        var $li = $('.case-wrap').find('li')
        $(".filter-case, .filter-case-locations").on("change", function() {
            var a = $(".filter-case").val();
            var b = $(".filter-case-locations").val();

            $li.hide().filter("." + a + '.' + b).show();

        }).change();
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="filter-case">

<option selected="" value="default">system</option>
  <option value="system_categories-system01">system01</option>
  <option value="system_categories-system02">system02</option>
  <option value="system_categories-system03">system03</option>
  <option value="system_categories-system04">system04</option>
  <option value="system_categories-system05">system05</option>
  <option value="system_categories-system06">system06</option>
  <option value="system_categories-system07">system07</option>
  <option value="system_categories-system08">system08</option>
</select>

<select class="filter-case-locations">
<option selected="" value="default">Location</option>
<option value="locaton_categories-essex">Essex</option>
<option value="locaton_categories-greenhithe">Kent</option>
<option value="locaton_categories-kent">Kent</option>
<option value="locaton_categories-london">London</option>
<option value="locaton_categories-sussex">Sussex</option>
</select>
<ul class="case-wrap">
<li class="boxes default locaton_categories-essex system_categories-system04"><h3>Essex System04</li>
<li class="boxes default locaton_categories-essex system_categories-system02"><h3>Essex System02</li>
<li class="boxes default locaton_categories-greenhithe system_categories-system04"><h3>greenhithe System04</li>
<li class="boxes default locaton_categories-greenhithe system_categories-system04"><h3>greenhithe System04</li>
<li class="boxes default locaton_categories-london system_categories-system04"><h3>London System03</li>
</ul>

For some reason the code doesn’t like divs? maybe harder to sort thought for the filter function anyway if anyone comes across this problem and is stuck this simple jQuery code should do the trick 😀 Today I learned I can love a jquery function thank you filter()

Write a comment

Your email address will not be published. Required fields are marked *