Skip to main content

5 Awesome JQuery Drop Down Boxes

By Sam Deering



Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

Jquery drop down menus can be used in a number of ways to improve the user experience when using the site. Here are a number of ways in which JQuery menus can really make a difference with minimal effort. Some of these examples are Jquery dropdown plugins which can simply be installed and used without writing too much code. Most plugins are fully customisable to suit your website and all require the Jquery installation package to work. You can also use the drop down boxes to auto populate results from your database using AJAX, this is to be covered in another article.

Select2 2.0

Update 05-06-2012: Select2 2.0 is by far the best plugin to use for jQuery drop down boxes and select replacements. With support for multi-selects, tags, lists, different datasets, ajax data loading, infinite scrolling etc…

1. The Facebook Complete

Give your users fancy Facebook-like dynamic inputs, with auto-complete and pre-added values.

facebook drop down box


2. The iPhone Style Drop Down Menu

“We created an iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It’s especially helpful when organizing large data structures that don’t translate well into traditional dropdown or fly-out menus.”

the iphone drop down


3. Fast Results Combo Box

This elegant combo box predicts options and shows then as your typing. It has some issues with IE but other than that works like a treat.



4. Dynamic Chained Combo Boxes

These combo boxes are dynamic! This means they load based on a choices selected in the other drop downs. This method is simple but very effective and can be used with AJAX calls to populate data in a database. For example, selecting a country would load the states and cities for that country. Live demo of dynamic combo box

chained combo box

5. Listbox with Attached Slider

This listbox is attached to a slider which represents the value selected in the drop down box. The value can be selected using both the drop down and the slider.

listbox slider

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn how Git works, and how to use it to streamline your workflow!

Google, Netflix and ILM are Python users. Maybe you should too?