Ryukyu Kobujutsu Nicho Kama Kumite At Shimokamo Jinja
Martial art demonstrations are held every year in the Shimokamo Temple in Kyoto, where one can observe several classical arts of ancient Japan, such as the Ryukyu Kobujutsu shown in the picture.

Replacing select element with Chosen, Select2 and selectize.js

Drop down selection <select> element is pretty much the longest living HTML element that does not enable great User Experience. Therefore developers and designers have looked at ways making it more usable and thus has arrived few JavaScript libraries that replace the given select element with other elements that combined with search and easy multiple selection buttons make the ancient form element behave and look like it should.

The purpose of this post is to look at the three most popular libraries, namely Chosen, Select2 and selectize.js, and compare their statistics a bit.

I have taken each of them into use within the two last years, according to the following connections to the sites that are relevant for me and in which I can try such things out:

All of the three are based on jQuery, while Chosen also has option to use Prototype.

Some statistics from each GitHub project, at the time of writing:

Name Stars Forks Issues (open/closed) Release count Latest release
Chosen 14668 2715 201/1563 26 1.0.0, 30th Jul 2013
Select2 9603 1660 232/1873 14 3.4.5, 4th Nov 2013
selectize.js 3004 370 103/175 58 0.8.5, 25th Nov 2013

Each of the following CodePen.io links contains an example which demonstrates a simple use for single selection and multiple selection options.

Since the visual elements are best defined via CSS, all of the plugins come with their default styling. The following table shows the sizes for the JavaScript and CSS needed for the plugin to work. The file sizes are measured from the latest releases, minified versions if available.

Name JavaScript CSS Images Total
Chosen 25.1 KB 11.3 KB 1.5 KB 37.9 KB
Select2 59.3 KB 17.2 KB 3.3 KB 79.8 KB
selectize.js 36.8 KB 11.3 KB - 48.1 KB