How to get dropdown menus behave like checkboxes?

Question

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 website: manu.mymaterial.org which I wish would sort the images the same way with dropdown menus like it works now with the checkboxes. I have tried and tried but nothing seems to work.

I have this prototype for you for fiddling out the problem, if you have the time. I would appreciate help immensely :)

I would like to be able to get same results with the dropdown menus (that don't work now) like with the checkboxes (that do work now)

https://codepen.io/manujarvinen/pen/BaRzGVa

Please tell me if I'm not clear enough or some information is missing. I'll be glad to get that info for you.

Cheers!

Manu

gearnoodle.com

EDIT: The answer to this question is awesome! But even more polished answer came in here in my second question: Filter accurately with BOTH checkboxes AND dropdown menus at the same time - Excellent!

Image of the manu.mymaterial.org website, just to give you some context:

And this is how I would like it to be:

var $filterCheckboxes = $('input[type="checkbox"]');
var filterFunc = function() {

  var selectedFilters = [];

  $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);

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;
}

Alireza Ahmadi · Accepted Answer

You expect menu works same as checkbox so you don't need to

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 () {
                debugger
                var 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;
}

How to get dropdown menus behave like checkboxes?

Answers (1)

Related Questions