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

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).