I need suggestions for a solid jQuery/CSS select box plugin

Question

I'm currently working on a project that's using the Dropkick.js plugin to style select boxes. One issue that we're running into is that dropkick, while it looks nice, simply doesn't mirror the methods, properties and events of a select box.

I've had to write a lot of extra code to disable/enable selects, get and set values and a number of other things to just get the selects to play nice with the rest of the site and interact with other form elements.

So we switched over to test selectBox. Fantasic plugin with one exception: If you remove/add selects o the page via ajax and jQuery, it destroys the settings on every select in the page. This results in unuseable selects and JS errors all over the place. Since we're doing a lot of dynamic content, this won't work either.

Is there a GOOD select plugin out there that exposes all the methods and properties of a select box, can be styled nicely, AND works with dynamic content?

Thanks for your suggestions!

Answer 1

I recently released SelectBoxIt. It is jam packed with features so check it out.

SelectBoxIt Notable Features:

• Styleable with the jQueryUI Themeroller (optional)

• Supports all jQuery and jQueryUI show/hide effects (optional)

• Supports all jQueryUI/custom icons

• Includes ARIA (Accessible Rich Internet Applications) support

• Full keyboard search and navigation support

• An event API triggered on the original select box element that calls the plugin

• A method API providing methods to interact with the dropdown list (i.e. Search, Open, Disable, Set Options).

• Passes jsHint with no errors

• Selected, Disabled, and Optgroup Support

• Easily extendable to allow developers to create new widgets

Answer 2

Here are a few options I know of (in no particular order):

StyleSelect

Website

Wraps the existing <select> tag, so all the events, properties and so on should remain accessible. The default styling isn't that nice though, and there are limits to how much it can be customised.

Chosen

Website - Github

Nice default styling, but the generated markup is kind of weird and it doesn't support the whole range of callbacks you might need (only change)

jQuery UI Selectbox

Website - Github

A good option if you are already using jQuery UI - otherwise potentially too much overhead. It doesn't use the <select>'s events, but has equivalent callbacks (and even ones not present on a regular submit, like open/close). Also it's ARIA compliant.

jStyling

Website - Github

Again, wraps the original <select> tag. Supports disabled options. Default styling is fairly uninspiring and it's designed to cover more than just select boxes (potentially unwanted cruft).

Uniform

Website - Github

Simple to implement, supports multiple themes. Lack of callbacks though, sometimes have to force update elements (mentioned already), covers more than just select boxes (again, potentially unwanted cruft).

Answer 3

Uniform looks cool!

I've seen a similar method here: http://www.verot.net/jquery_select_skin.htm

It just hides the select box using opacity, and overlays a div that you can style

Answer 4

Uniform works well in my experience. If you update values dynamically, you have to call an update function, but that is easy enough.