How To Get Dropdown Menus Behave Like Checkboxes?

I'm a bit of a noob, but managed to make something still with the help of one JavaScript snippet I found here (need to dig it up soon, but for now, my problem:) I'm making this web

Solution 1:

You expect menu works same as checkbox so you don't need to <option value="showAll">show all</option>

simply you can get all selected option and doing like filterFunc

Here is working sample:

var $filterCheckboxes = $('input[type="checkbox"]');
        var $filtermenues = $('.grid1');

        filterfuncAnother = function () {
            var selectedFilters = [];

            $filtermenues.find(":selected").each(function () {
                debuggervar v = this.value;
                if (selectedFilters.indexOf(v) === -1 && v)
                    selectedFilters.push(v);
            });

            $('.animal' && '.filterDiv')
                .hide()
                .filter(
                    function (_, a) {
                        var itemCat = $(a).data('category').split(' ');
                        if (itemCat.indexOf("showAll") > -1)
                            return;
                        return selectedFilters.every(
                            function (c) {
                                return itemCat.indexOf(c) > -1;
                            })
                    })
                .show();
        }

        var filterFunc = function () {

            var selectedFilters = [];
            debugger
            $filterCheckboxes.filter(':checked').each(function () {
                var v = this.value;
                if (selectedFilters.indexOf(v) === -1)
                    selectedFilters.push(v);
            });

            $('.animal' && '.filterDiv')
                .hide()
                .filter(
                    function (_, a) {
                        var itemCat = $(a).data('category').split(' ');
                        return selectedFilters.every(
                            function (c) {
                                return itemCat.indexOf(c) > -1;
                            })
                    })
                .show();

        }

        $filterCheckboxes.on('change', filterFunc);

        $('select').on('change', filterfuncAnother);

body {
width: 100%;
text-align: center;
background-color: black;
color: white;
}
.grid {
width: 300px;
margin: 50px auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.filterDiv {
width: 100px;
height: 100px;
}

<!-- Help needed in this URL: https://stackoverflow.com/q/68315184/4383420 --><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass=grid1><select><optionvalue="">--</option><!--<option value="showAll">show all</option>--><optionvalue="violet">violet</option></select><select><optionvalue="">--</option><!--<option value="showAll">show all</option>--><optionvalue="blue">blue</option></select><select><optionvalue="">--</option><!--<option value="showAll">show all</option>--><optionvalue="yellow">yellow</option></select></div><divclass=grid><label>violet
    <inputtype="checkbox"value="violet" /><spanclass="checkmark"></span></label><label>blue
    <inputtype="checkbox"value="blue" /><spanclass="checkmark"></span></label><label>yellow
    <inputtype="checkbox"value="yellow" /><spanclass="checkmark"></span></label></div><divclass=grid><divclass="filterDiv"data-category="violet blue"style="background-color: blue"></div><divclass="filterDiv"data-category="violet red"style="background-color: red"></div><divclass="filterDiv"data-category="yellow"style="background-color: yellow"></div></div>