Home & blog  /  Scripts  /  view post  /

jQuery drop-down selector

Overview

Dropdown is a Javascript/CSS-powered simulation of the in-built element.

Example 1 - navigation

Where would you like to navigate to? (try all three options)

Here's the code behind this example:

1new Dropdown({

2     mode: 'nav',

3     data: [

4         {text: 'Select a site...'},

5         {

6             url: 'http://www.google.com',

7             click: function() {

8                 return confirm("Are you sure you want to go to Google?");

9             },

10             text: 'Google'

11         },

12         {

13             url: 'http://www.yahoo.co.uk',

14             text: 'Yahoo!'

15         },

16         {

17             url: 'https://mitya.co.uk',

18             text: "Mitya's website"

19         }]

20});

^^ top of page

Example 2 - form field

Dropdown can also be used as a fancy alternative to a select form field. Like its genuine counterpart, it will send a value to the server once the form is submitted.

Click to get the value of the selected 'option'

Here's the code behind this example:

1new Dropdown({

2     mode: 'form',

3     data: [{text: 'Select an animal...'}, {val: 1, text: 'dog'}, {val: 2, text: 'cat'}, {val: 3, text: 'platipus'}],

4     fieldName: 'animal'

5});

^^ top of page

Usage & params

In your page, call new Dropdown(data), where 'data' is an object of parameters including:

mode (str) - either 'nav' or 'form', depending on whether you want a navigational tool or a form field

cssClass (str) - the name of a CSS class to apply to further style the drop-down, in addition to any styling specified in the config section of the script itself

appendTo (str) - a jQuery selector string targeting the element you wish to append to the dropdown to. To write the dropdown in place, i.e. via document.write(), omit this param.

data (array) - a multi-dimensional array holding an object for each link (in nav mode) or option (in form mode), each of which has parameters depending on the current mode:

In nav mode:

-- url (string) - the URL to go to when the link is clicked

-- text (string) - the link text for the link

--- img (string) - an image that should appear with the option (positioned and sized in CSS)

-- click (func) - a function to be invoked when the link is clicked (like with all event callbacks, set this up to receive one argument if you want to access the event object inside the function)

-- disabled (bool, default: false) - if true, the link will look disabled and will not respond if clicked

In form field mode

-- val (string) - the option's value (if null, the option's text will be used as the value)

-- text (string) - the option's text

--- img (string) - an image that should appear with the option (works same as in 'nav' mode)

-- click (func) - a function to be invoked when the link is clicked (works same as in 'nav' mode)

^^ top of page

Notes

Columns

By default, the script will sort your drop-down into two columns of links if you feed it more than 5 links. You can change this minimum value by updating the line in the script that begins this.numCols =...

Navigation mode: HREFs vs. click events

In the majority of cases when using Dropdown in navigation mode, you won't want to give an item both a HREF and a click callback. One exception might be as per example 1 above, where navigation to the URL depends on some Javascript which should be evaluated first). If you do, and for this reason, note that the click callback will fire before the browser is asked to follow the HREF.

^^ top of page
post new comment

Comments (11)

Gareth, at 22/09/'10 14:36, said: 
This doesn't work in ie8
Gareth, at 22/09/'10 15:21, said: 
Ignore my previous comment, I think my work administrator has changed the settings on our browsers. sorry
Paul, at 23/10/'10 21:23, said: 
Just found your site - v nice! Lots of cool scripts and useful explanations. I'll be visiting often!
Mitya, at 24/10/'10 11:13, said: 
Thanks - if you use my scripts on any site, drop me a link. I'm always curious :)
gubagu, at 10/12/'10 22:07, said: 
Great site very useful stuff !!!

Thank you for sharing your skills and passion with us !!!
Small report.
Drop down selector does not work good in IE8. The moment you try to click on the links when open it closes. Actually it closes the moment you leave the "click me to select" text. by the way in IE7 does not work at all. Clicking does not trigger anything visible. 

I hate Explorer. Microsoft should stop with it :-D

Take care,
Guby
Mitya, at 10/12/'10 23:41, said: 
Hi Guby - ouch, yes. It used to work - I think I must have broken it slightly in IE. Anyway I have a new version of this script - which is much better as it can be used in forms as well as to provide links - but I'm flying out on holiday tomorrow so I will upload it next week when I get online. Please check back regularly to get the latest script.

And thanks for your kind words about my work.
raghib.suleman, at 7/01/'11 10:17, said: 
good work
Michael Eaton, at 29/08/'11 19:45, said: 
How about allowing images within the drop down? Would be perfect for what I need :)
Mitya, at 30/08/'11 10:21, said: 
 Eaton - good idea, I'll build this in some time during the coming week. Keep an eye on the site for updates!
Jambu, at 16/11/'11 16:39, said: 
Out of all the scripts out there, yours fits exactly to what I am looking for except, to add select groups. Is it possible to add select groups?
Mitya, at 25/11/'11 12:26, said: 
Thanks, Jambu. Presently it does not support select groups. Good idea, though; I will extend it to do so in the coming weeks - stay tuned!
post new comment