Create multiple jQuery dropdowns/selectboxes

Question

This goal is to create a script thats can be used with multiple dropdowns on the same page. The dropdowns content is various (pics, lists etc) so this topic will only focus on the dropdowns basics (open/close/style).

I build the dropdowns by using three divs and two different style-classes that toggle (depending on if the dropdown is open or not).

I am in the middle of the process of figuring out how to make only one div show at once, so if one dropdown is open and some other dropdown is clicked, the first thats opened should automaticly close (hide). I am total beginner in jQuery so all help is very appreciated, it would be great if you could leave a comment in the code so I get it and learn some.

This is how the code looks for now. I modify a script I got help with earlier.

http://jsfiddle.net/yup2s/1/

Later the dropdown also need a special function that I hope is possible to do in jQuery. When close the dropdown (I havent really made it so far yet) there should be two different options how to do it:

1: Click at label or outside the div (at the page), used when there is multiple settings in the dropdown so many clicks can be made in the dropdown before close. 2: Click at label, inside or outside the div (when div workes like a selectbox).

Sorry for bad english.

Karl-André Gagnon · Accepted Answer · 2013-06-25 02:33:37Z

1

Take a look at this fiddle : http://jsfiddle.net/yup2s/4/

For the part where "when you click one, the other close", i simply added those 2 lines in the if statement:

$('.style_active').siblings('[id^=drop_]').hide();
$('.style_active').removeClass("style_active");

Then for your second request, i added a function on the document click :

$(document).click(function(){
    $('.style_active').siblings('[id^=drop_]').hide();
    $('.style_active').removeClass("style_active");
})

But there is a new problem, since your dropdown is a part of the document, when you click on the, it immediately close. You need to stop pragation on dropdown click with that :

$("div").on('click', function (e) {
    e.stopPropagation();
}

answered Jun 25, 2013 at 2:33

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Vode Over a year ago

Wow you wrote more efficient code in 5 min then I have written in some hours. This is great! I will sure mess around with this code until I learn something from it. Do you maybe want to look into that little special function I mention also? I dont know if thats possible with jQuery. Thanks alot! You have helped alot.

Karl-André Gagnon Over a year ago

Everything is possible with jquery, do you mean something like this : jsfiddle.net/yup2s/20? If yeah, check the last function i added.

Vode Over a year ago

Glad to hear that. You mean just rename that class (.drop) in the last function and give that class to a "#drop_x" div?

Karl-André Gagnon Over a year ago

Dont need, the last function work as long as all your option have the class drop.

Vode Over a year ago

Ok I think I explained badly in my first post. The basics dropdown functionality works great now, the extra function would work like this: At the moment dropdowns closes when click anywhere (at title, in dropdown, outside dropdown). What I need is a extra function for some dropdowns (not all, majority is closed as they are at the moment) so they dont close when click inside the dropdown (if there is many settings etc = many clicks), so some dropdowns only close at click to either title or outside the dropdown, the most efficient I guess would be to add a class to those. Thanks for you time.

|

Collectives™ on Stack Overflow

Create multiple jQuery dropdowns/selectboxes

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related