If there are important elements in the structure of a web page and that are difficult to design at the same time, they are the select boxes, or pull-down menus. The difficulty in designing them is that they exist as multiple selections and also simple selections.

Each device and browser has its own way of rendering, therefore the final result may not be very visually pleasing, and to apply the CSS styles in order to transform them in the design by the designer is not a trivial task. Yes, additionally the web site that we are developing, we do so using a CMS, less trivial yet.

Happily, as on other occasions, the Javascript comes to the rescue and on the web we can find different solutions, in Javascript libraries, we are able to solve this problem and help with a relatively quick fix.

These tools hide in the original pull-down menu, and create a representation in HTML, much easier to design.

Chosen
Chosen is a jQuery plugin that transforms the long directory listings from “select” listings to more “user-friendly” listings.

It supports all modern browsers (Firefox, Chrome, Safari, and IE9) and in compatibility mode IE8. It doesn’t work properly on Android, iPhone, and iPod touch. In addition to jQuery, it’s available as a prototype.

Using Chosen with Ajax Chosen, it’s possible to improve the functionality and use Ajax to fill the drop down menu with options.

Also Chosen has different options and attributes that permit you to have advanced control of drop-down menus.

Wordpress has a plugin that uses this and Drupal also has a model.

SelectBoxIt
SelectBoxIt by George Franko is a very easy tool to use and at the same time it’s powerful. In addition of supporting the platforms of Twitter, Bootstrap, and jQueryUI by defect, also it can be done with jQuery Mobile and reclaim the support for mobile and tablet device browsers.

ddSlick
If what you are looking for is a pull down menu with images, ddSlick is most interesting for this. In addition to the possibility of adding images “out of the box,” it’s also possible to add descriptions in the options list. I believe that this leads to another level of pull down menus. It also permits the use of JSON to fill the options in the pull down menu, as well as interesting customization options.

gentleSelect
Another alternative for lists that are too long, is to divide them by a number of columns or lines. GentleSelect, in addition of facilitating the layout, also offers the possibility of doing so automatically through a command. It’s an interesting tool to experiment with, but I don’t advise you to use it in production. Unless we know what we’re doing.

Other plugins:

jQuery Selectric
HeapBox
wSelect.js
flexselect
selectator

Written by Chiyana Simones
Translated by Emily Smith, INUSUAL intern