Filtering with a drop-down menu #106

trewknowledge opened this Issue Nov 8, 2011 · 17 comments



ghost commented Nov 8, 2011

Just thought I would share with everyone on how to use filtering Isotope with a drop-down menu.

Pretty similar to sorting with check boxes as seen here:

So here is how you do it with a drop-down menu:


is there any way to combine multiple dropdown menus (up to eight :-)) to filter results?
Similar function: but instead of UL and LI using OPTION SELECT

@vangelis183 I'm wrapping up a tutorial that covers this - right now it uses Chosen - but I can add a straight-up vanilla dropdown example too if you're interested.

Should have something online within a couple of days, just been bogged with work.

@j-hernandez Very interesting. Looking forward for the tutorial. Can you post the dropdown example?

I'll see if I can get something quick done later today. It's not all too difficult, even with Chosen and BBQ in the mix. Stay tuned.

all ready got it work with unordered list, but cannot make it work with option-select


desandro commented Dec 29, 2011

I appreciate sharing the knowledge :) I'm closing this issue as I like to keep open issues for issues that are not yet resolved. Hopefully, people should be able to find this one via issue search.

@desandro desandro closed this Dec 29, 2011

eirich commented Jun 5, 2012

@j-hernandez Did you ever manage to finish that tutorial? I've been struggling with making a solution like that the last few days.

Apologies! We adopted a puppy and when I'm not slinging code from 9-5 for work I am splitting puppy duty with the missus and I haven't had time (read: energy) to wrap up the tutorial. Let me see if I can throw up a couple of gists that can get you going. Will need a few hours, putting out some fires at the office.

eirich commented Jun 5, 2012

No worries at all :-) I would really appreciate if you manage to help me out somehow, though. Thanks a lot in advance.

nelga commented Jun 21, 2012

Would love to see this dropdown work with the 'sort by' option too! Have been attempting to rework the code on the demo page but without any luck so far.

Any idea how to attach an 'active' class to the selected item?

Needed dropdown selection too... so made it in jsFiddle... enjoy!

@mister-cairns desandro posted a solution for adding a class to the selected items. Meaning the items which are not hidden:

@vangelis183 ahhh great - thanks for the heads-up.

@WeArePercipio Thanks for your jsFiddle! This works great

@WeArePercipio + Anyone else :) How would you get it to work with a multi select?
@j-hernandez You still have that link to your tutorial at hand?

This fiddle worked great. You do have an extra ';' in it, but it didn't affect anything.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment