selected.js is a dependency free
<select> replacement. It supports both single and multiple select boxes, has a tiny JS & DOM footprint and is incredibly easy to style.
Setting this up is as simple as:
selected.js because I could not find a solid
<select> replacement that didn’t rely on jQuery. These days I often find jQuery to be unnecessary; I don’t want to include an extra ~80+kb just for the sake of usable
selected.js keeps things as simple as possible by swapping out the original element with two lists, wrapped in a container. One displays the active options and the other the dropdown options. There’s no complicated DOM structure or appending of elements to the body.
The end result is a
<select> replacement that is lightweight in terms of both code (~4kb) and DOM usage. This makes it highly performant compared to it’s jQuery based rivals. The flip side, of course, is that it only supports good/“modern” browsers (IE10+).
If you’re looking for absolute speed, or just something simple, you might wish to give
selected.js a try.