Filter / hide divs based on if user's selection in dropdown matches company data attribute

0
votes

Objective

  • When a user selects an option from either the company size .select__size or industry type .select__industry dropdown, hide any companies .leaderboard__company from the leaderboard if the value of the dropdown does not match a companies' data attributes data-size or data-industry

Expected behaviour

  • For example, a user selects a large company, hide all other .leaderboard__company with a data-size that isn't size_lg

Update #1:

Problem

  • I'm trying to hide these .leaderboard__company based on the list of companies being returned through firstFilter and secondFilter, but when I make a selection in one of the dropdowns, all the divs containing the company information are hidden
  • I need to fix my if-statement to show / hide these divs when only the first dropdown is selected, when only the second is selected, both or none (which will be the default to show all).

scripts.js

$(function(){

    // Array of dummy data containing the full list of companies that were named this year's top workplaces in the small, midsize and large categories
    var companies = [
        {
            "size": "size_lg",
            "industry": "industry_a"
        },
        {
            "size": "size_lg",
            "industry": "industry_a"
        },
        {
            "size": "size_lg",
            "industry": "industry_b"
        },
        {
            "size": "size_lg",
            "industry": "industry_c"
        },
        {
            "size": "size_lg",
            "industry": "industry_d"
        },
        {
            "size": "size_lg",
            "industry": "industry_d"
        },
        {
            "size": "size_md",
            "industry": "industry_e"
        },
        {
            "size": "size_md",
            "industry": "industry_a"
        },
        {
            "size": "size_sm",
            "industry": "industry_b"
        },
    ];

    $('.leaderboard__company').show();

    // Every time there is a change in one of the select dropdowns, do the following
    $("select").change(function(){

        // Store the value of the visible and selected elements in each of the two dropdowns. By default the value of the size and industry dropdowns is `size__all` and `industry__all`
        var sizeValue = $(".select__size:visible").find(":selected").val();
        var industryValue = $(".select__industry:visible").find(":selected").val();

        $('.leaderboard__company').show();

        if (sizeValue) {
          $('.leaderboard__company').not('[data-size="' + sizeValue + '"]').hide();
        }

        if (industryValue) {
          $('.leaderboard__company').not('[data-industry="' + industryValue + '"]').hide();
        }

        // Just logging to the console to see if these values match when I make a selection from either of the dropdowns
        console.log(sizeValue);
        console.log(industryValue);

        // The first filter relates to the size of the company. We are using filter to create a new array that returns `sizeValue` only if the element's size property and the selected sizeValue are exactly equal to each other.

        // For instance, if a user selects the option for large companies in the dropdown, then the array should only contain companies where the element's size property is `size_lg`

        var firstFilter = companies.filter(function(el) {
            if (el.size === sizeValue) {
                return sizeValue;
            } else {
                return false;
            }
        });

        // With the second filter, we are taking the filtered first array and filtering a second time and creating a new array based on the value of selection made in the industry type dropdown.
        var secondFilter = firstFilter.filter(function(el) {
            if (el.industry === industryValue) {
                return industryValue;
            } else {
                return false;
            }
        });

        // Now that I have a filtered array with companies that match the user's selection of company size and type of industry, I need to hide the corresponding elements with a class of `.leaderboard__company` where the values of the companies do not match

        // console.log(firstFilter);
        // console.log(secondFilter);
    });
});

index.html

<div class="filter">
    <p class="filter__title">Filter businesses by size or industry</p>
    <p class="filter__subtitle">Profile information provided by employer via WorkplaceDynamics</p>

    <select name="" id="size" class="select__size">
        <option value="size_all">All sizes</option>
        <option value="size_lg">Large</option>
        <option value="size_md">Midsize</option>
        <option value="size_sm">Small</option>
    </select>

    <select name="" id="industry" class="select__industry">
        <option value="industry__all">All industries</option>
        <option value="industry_a">Accounting</option>
        <option value="industry_b">Advertising</option>
        <option value="industry_c">Agents / Brokers</option>
        <option value="industry_d">Agriculture</option>
        <option value="industry_e">Architectural, Engineering, and Construction Svcs</option>
        <option value="industry_f">Auto Dealership</option>
        <option value="industry_g">Automotive Glass Repair and Replacement</option>
    </select>
</div>

<h2>Large</h2>
<h3>500 or more employees</h3>

<div class="leaderboard">
    <div class="leaderboard__group leaderboard--lg">
        <div class="leaderboard__company" data-size="size_lg" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">1</p>
            </div>
            <div class="leaderboard__info">
                <p class="leaderboard__size">Large</p>
                    <div class="leaderboard__wrapper--name">
                        <p class="leaderboard__name">tk-name</p>
                    </div>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <div class="leaderboard__change--inner">
                    <i class="fa fa-caret-up" aria-hidden="true"></i>
                    <p class="leaderboard__change--number">2</p>
                </div>
            </div>
        </div>

        <div class="leaderboard__company" data-size="size_lg" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">2</p>
            </div>

            <div class="leaderboard__info">
                <p class="leaderboard__size">Large</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <div class="leaderboard__change--inner">
                    <i class="fa fa-minus" aria-hidden="true"></i>
                    <p class="leaderboard__change--number">0</p>
                </div>
            </div>
        </div>

        <div class="leaderboard__company" data-size="size_lg" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">3</p>
            </div>
            <div class="leaderboard__info">
                <p class="leaderboard__size">Large</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <p class="leaderboard__label">New</p>
            </div>
        </div>

        <div class="leaderboard__company" data-size="size_lg" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">4</p>
            </div>
            <div class="leaderboard__info">
                <p class="leaderboard__size">Large</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <p class="leaderboard__label">New</p>
            </div>
        </div>

        <div class="leaderboard__company" data-size="size_lg" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">5</p>
            </div>
            <div class="leaderboard__info">
                <p class="leaderboard__size">Large</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <div class="leaderboard__change--inner">
                    <i class="fa fa-caret-up" aria-hidden="true"></i>
                    <p class="leaderboard__change--number">8</p>
                </div>
            </div>
        </div>
    </div> <!-- .leaderboard __lg-->
</div>

<!-- START OF AD CODE -->
<div class="advertising advertising--rect">
    <div class="text-center hidden-xs">
        <div id="fixed-leaderboard-top"
            class="dfp-ad"
            data-dfp-custom-pos="fixed-leaderboard-top, atf"
            data-dfp-size="[728,90]">
        </div>
    </div>

    <div class="text-center hidden-sm hidden-md hidden-lg">
        <div id="fixed-leaderboard-top-mobile"
            class="dfp-ad"
            data-dfp-custom-pos="fixed-leaderboard-top, atf"
            data-dfp-size="[320,50]">
        </div>
    </div>
</div>
<!-- END OF AD CODE -->

<h2>Midsize</h2>
<h3>150-499 employees</h3>

<div class="leaderboard">
    <div class="leaderboard__group leaderboard--md">
        <div class="leaderboard__company" data-size="size_md" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">1</p>
            </div>

            <div class="leaderboard__info">
                <p class="leaderboard__size">Midsize</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>

            <div class="leaderboard__change">
                <div class="leaderboard__change--inner">
                    <i class="fa fa-minus" aria-hidden="true"></i>
                    <p class="leaderboard__change--number">0</p>
                </div>
            </div>
        </div>  <!-- .leaderboard __company-->

        <div class="leaderboard__company" data-size="size_md" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">2</p>
            </div>

            <div class="leaderboard__info">
                <p class="leaderboard__size">Midsize</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>

            <div class="leaderboard__change">
                <div class="leaderboard__change--inner">
                    <i class="fa fa-caret-up" aria-hidden="true"></i>
                    <p class="leaderboard__change--number">6</p>
                </div>
            </div>
        </div>  <!-- .leaderboard __company-->

        <div class="leaderboard__company" data-size="size_md" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">3</p>
            </div>

            <div class="leaderboard__info">
                <p class="leaderboard__size">Midsize</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>

            <div class="leaderboard__change">
                <p class="leaderboard__label">New</p>
            </div>
        </div>  <!-- .leaderboard __company-->

        <div class="leaderboard__company" data-size="size_md" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">4</p>
            </div>

            <div class="leaderboard__info">
                <p class="leaderboard__size">Midsize</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>

            <div class="leaderboard__change">
                <div class="leaderboard__change--inner">
                    <i class="fa fa-caret-down" aria-hidden="true"></i>
                    <p class="leaderboard__change--number">1</p>
                </div>
            </div>
        </div>  <!-- .leaderboard __company-->

        <div class="leaderboard__company" data-size="size_md" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">5</p>
            </div>

            <div class="leaderboard__info">
                <p class="leaderboard__size">Midsize</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>

            <div class="leaderboard__change">
                <div class="leaderboard__change--inner">
                    <i class="fa fa-caret-up" aria-hidden="true"></i>
                    <p class="leaderboard__change--number">1</p>
                </div>
            </div>
        </div> <!-- .leaderboard __company-->
    </div> <!-- .leaderboard __md-->
</div> <!-- .leaderboard-->

<!-- START OF AD CODE -->
<div class="advertising advertising--rect">
    <div class="text-center hidden-xs">
        <div id="fixed-leaderboard-top"
            class="dfp-ad"
            data-dfp-custom-pos="fixed-leaderboard-top, atf"
            data-dfp-size="[728,90]">
        </div>
    </div>

    <div class="text-center hidden-sm hidden-md hidden-lg">
        <div id="fixed-leaderboard-top-mobile"
            class="dfp-ad"
            data-dfp-custom-pos="fixed-leaderboard-top, atf"
            data-dfp-size="[320,50]">
        </div>
    </div>
</div>
<!-- END OF AD CODE -->

<h2>Small</h2>
<h3>149 employees or less</h3>

<div class="leaderboard">
    <div class="leaderboard__group leaderboard--sm">
        <div class="leaderboard__company" data-size="size_sm" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">1</p>
            </div>
            <div class="leaderboard__info">
                <p class="leaderboard__size">Small</p>
                <a href=""><p class="leaderboard__name">tk-name</p></a>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <div class="leaderboard__change--inner">
                    <i class="fa fa-caret-up" aria-hidden="true"></i>
                    <p class="leaderboard__change--number">1</p>
                </div>
            </div>
        </div>

        <div class="leaderboard__company" data-size="size_sm" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">2</p>
            </div>
            <div class="leaderboard__info">
                <p class="leaderboard__size">Small</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <p class="leaderboard__label">New</p>
            </div>
        </div>

        <div class="leaderboard__company" data-size="size_sm" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">3</p>
            </div>
            <div class="leaderboard__info">
                <p class="leaderboard__size">Small</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <div class="leaderboard__change--inner">
                    <i class="fa fa-caret-up" aria-hidden="true"></i>
                    <p class="leaderboard__change--number">5</p>
                </div>
            </div>
        </div>

        <div class="leaderboard__company" data-size="size_sm" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">4</p>
            </div>
            <div class="leaderboard__info">
                <p class="leaderboard__size">Small</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <div class="leaderboard__change--inner">
                    <i class="fa fa-caret-down" aria-hidden="true"></i>
                    <p class="leaderboard__change--number">3</p>
                </div>
            </div>
        </div>

        <div class="leaderboard__company" data-size="size_sm" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">5</p>
            </div>
            <div class="leaderboard__info">
                <p class="leaderboard__size">Small</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <p class="leaderboard__label">New</p>
            </div>
        </div>
    </div> <!-- .leaderboard __sm-->
</div> <!-- .leaderboard -->
2
javascriptjqueryhtmlcssselect
It Because all your divs contain the attribute: data-industry empty. So, in this part: if (industryValue) { $('.leaderboard__company').not('[data-industry="' + industryValue + '"]').hide(); } all divs are hide. Sorry for my en. =) - Aline
@Aline I basically need an if-statement when just the first dropdown is selected, the second is selected, both or none (which will be the default to show all). - Mary Yacoubian
@Aline I've added clarifying details to make it more clear what I'm trying to accomplish with the if-statement. Even with the data-attribute not being a blank string, there are still issues with it hiding all the companies from the leaderboard. - Mary Yacoubian

2 Answers

1
votes

You have a couple options, either handle your "size_all" and "industry_all" values within your JS function.

if (sizeValue && sizeValue !== "size_all") {
  $('.leaderboard__company').not('[data-size="' + sizeValue + '"]').hide();
}

if (industryValue && industryValue !== "industry__all") {
  $('.leaderboard__company').not('[data-industry="' + industryValue + '"]').hide();
}

Or you can just use an empty string value for your All Industries and All sizes options.

0
votes

Well, I undertood you need to know when a menu is selected. So, I suggestion separate the change method:

        $(".select__size").change(function () {
            var sizeValue = $(".select__size").val();
            $('.leaderboard__company').show();
            if (sizeValue)
                $('.leaderboard__company').not('[data-size="' + sizeValue + '"]').hide();

            if ($(".select__industry").val())
                $(".select__industry").change();
        });

        $(".select__industry").change(function () {
            var industryValue = $(".select__industry").val();
            if (!$(".select__size").val())
                $('.leaderboard__company').show();

            if (industryValue)
                $('.leaderboard__company:visible').not('[data-industry="' + industryValue + '"]').hide();
        });

I altered the value in yours selects when option is default:

<select name="" id="size" class="select__size">
            <option value="">All sizes</option>
...
</select>

<select name="" id="industry" class="select__industry">
            <option value="">All industries</option>
...
</select>

To confirm the test, add one register to:

<div class="leaderboard__company" data-size="size_md" data-industry="industry_d"> ...
</div>

This way, one menu is associate with another

Again, sorry for my English.