What Is The Best JavaScript/jQuery Custom Select Plugin?

While coding forms, ugly default select box is usually replaced with custom design. What plugin does the job best?

To choose the right plugin for custom select is not only about dependencies or size, but you need to answer couple of questions for yourself:

  • Is “tagging” (multiple select) functionality necessary?
  • Do you need “search“? (lists in selects would be long?)
  • Do you to place images into options?
  • Are your data options rendered asynchronously?
  • Should be a select box created dynamically?
  • Do you need to listen to select events?

Fortunately, there are plenty of very good solutions. “Search” configuration is possible in all mentioned plugins.

Some of them support Twitter Bootstrap CSS styling, if this front-end framework is preferred.

Finally, as in slider or carousel comparisons, you find only free plugins, not paid.

JavaScript/jQuery Custom Select Plugins Comparison

Name Dependency Size Tagging Note
Choices no 69kB (JS)
9kB (CSS)
yes Inconspicuous, pure JavaScript, but well documented with all you might need.
Chosen jQuery 29kB (JS)
10kB (CSS)
yes Very simple with only a few events available.
Select2 jQuery 74kB (JS)
15kB (CSS)
yes Popular, used e.g. in Woocommerce plugin (WordPress ecommerce extension). Docs looks bit messy.
SelectBoxIt jQuery, jQueryUI 26kB (JS)
7kB (CSS)
no Heavy dependencies and no multiple select. Bootstrap support.
Selectmenu jQuery 58kB (JS)
14kB (CSS)
no If using jQueryUI anyway, and you need only basic functionality, it might be a good choice.
Selectize jQuery 38kB (JS)
9kB (CSS)
yes Bootstrap support. Simple similar to Chosen.

Summary

Images can be placed into options in Select2 or also Selectmenu plugins.

Generally, Select2 is a safe choice, it is highly configurable, you can do almost anything you would think of.

If plain JavaScript is used, Choices offers rich possibilities in settings, events and methods.

Which one do you use?