Главная
portfolio designers contact

The best jQuery-based replacement <SELECT>

February 11th, 2013

Objectives:

  1. Possibility to style the drop-down control (<SELECT>) in a cross-browser compatible way
  2. It should hide, update, and follow underlying select tag, so that when the select tag is changed (for example, by the user a Reset button on the form) the visual replacement changes its state accordingly. Ideally, the replacement should trigger whatever events the select tag listens to (i.e., onChange = “window.location=’/choice.php?id=this.value()’;”)

Plugins

Generally, as of February 2013 none of the plugins tested below reset on reset, that is, when the user hits a reset button of the form, the replaced selects are reset to the options selected on document load, but the visual controls representing them are either not reset or blanked. This issue can be addressed separately by firing selects’ change event an interval after the form reset event is triggered (in the forms reset event handler). So basically you can use SelectBoxIt, SelectBox, or jQuery Autocomplete (upon investing some styling effort).

My personal choice, though, is to avoid drop-down lists altogether :) wherever possible.

Anyway, here’s what I have tested and found out.

SelectBoxIt

It just works!

+ keyboard support.

+ Based on jQuery UI.

– Doesn’t reset.

Selectbox

You need a patch to prevent it from sending the value twice (the original selected option and the final one).

ShaneS 
TO MAKE SURE THE ORIGINAL HIDDEN DROPDOWN ONLY HAS THE CURRENT OPTION SELECTED

In the selectbox.js, add this

$(target).find("option").attr("selected", FALSE);

right before

$(target).find("option[value='" + value + "']").attr("selected", TRUE);

+- keyboard support (tab and arrows), though the down key doesn’t open the list: some like it, some don’t;

+ easy to style

– doesn’t reset on form reset

jQuery UI Autocomplete

+ is based on jQuery UI

– In its default implementation (which disclaims itself as raw) is visually unstable – there’s a 1px break in height between the input and the drop-down button.

– Upon Reset loses the original display (the pre-selected option), actually the control just blanks out, although the original select is reset to the option selected on load.

msdropdown

+ Rich decorations with images the programmer can specify in the HTML code of selects.

Doesn’t reset on reset.

-The user can tab onto the original select.

DropKick

+ Handles keyboard good.

– no longer supported. Doesn’t work with jQuery 1.9 (works with 1.6).  It’s a shame it’s abandoned.

There are plenty of others, feel free to suggest something noteworthy.