For D3mystic.com, my website on diablo3, I need selection lists that look like the one below :

 

I found several selection list plugins that could match : chosen, select2, bootstrap-select, jquery-selectBox, selectize, select.js, SelectBoxit, jquery nice select, jquery sumo select, ddslickjqueryui select menu

However, the select list must meet several mandatory criteria:

  • Highly customizable,
  • Templating (pictures next to options),
  • Methods of destruction and update
  • Must work with jquery 3*
  • Plugin maintenance
  • An input to search for options
  • Multiple selection

All plugins are not usable in the state, especially at the level of the mulitple selection. So I kept 3 plugins : Select2, Chosen et Boostrap-select.

We will see the advantages and disadvantages of each of its plugins and we will keep the one that fits best. For each plugin, I created a codepen

1) Select2

Codepen : 

See the Pen Select2 - Diablo3 style by Detiege (@cromartie) on CodePen.

 Advantages :

  • Easy to use options
  • Easy to use attributes

Drawbacks : 

  • Multiple selection in tags
  • Style sheet difficult to edit
  • Custom scrollbar difficult to insert

The 2 negatives are the multiple selection in tags and the custom scroll bar that shows the original scrollbar (system scroll bar) before appearing.

2) Chosen

Codepen :

See the Pen Chosen select - diablo 3 style by Detiege (@cromartie) on CodePen.

Advantages :

  • Easy to use options
  • Easy to use attributes
  • Style sheet easy to edit

Drawbacks : 

  • Few options
  • Few attributes
  • Multiple selection in tags
  • No templating at the origin
  • Phone customization

The negative point is the multiple selection in tags and the customization of the selection on the phone.

3) Bootstrap-select

Codepen :

See the Pen Bootstrap-select - diablo 3 style by Detiege (@cromartie) on CodePen.

Advantages :

  • Easy to use options
  • Easy to use attributes
  • Templating easy to use

Drawbacks : 

  • Selection list attached to the structure
  • Custom scrollbar difficult to insert
  • Style sheet difficult to edit

The big problem with this plugin is that the selection list is attached to the structure, as well as the problem of inserting a custom vertical scrollbar.

So I'll use select2, as well as bootstrap-select in some parts of the site where space is limited (the tagging system does not allow a responsive side). One way to limit the height of the select2 select list would be to add a scrollbar to the selection list

Currently, bootstrap-select is here, because if we used the multiple select2, it would push the content down:

Select2 tags :

Solution Select2 tags with scroll bar: