5 Awesome JQuery Drop Down Boxes

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

Source: http://www.emposha.com/javascript/jquery/jquerymultiselect.html


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

Source: http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu


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.

jquery-drop-down

Source: http://plugins.jquery.com/project/DDComboBox


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


http://codeassembly.com/Simple-chained-combobox-plugin-for-jQuery/

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

http://www.senamion.com/blog/jslider_demo.html
.