Web Developer
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?