selected.js Sun 25 October 2015

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:

<link type="text/css" rel="stylesheet" href="selected.min.css" />
<link type="text/css" rel="stylesheet" href="selected-light.min.css" />

<select multiple class="selected selected-light">
    <option>Option one</option>
    <option>Option two</option>

<script type="text/javascript" src="selected.min.js"></script>
<script type="text/javascript">selected.init();</script>

I created 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 <select> boxes.

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.

View on GitHub | View examples page