Building a Better Multi-Select with Bootstrap

The select component is one of the most fundamentally frustrating components in HTML forms. This is what it looks like:

The code needed to collect the values from this object is also complicated. For most inputs you can get the value by calling .value. In this case you have to write your own code to get the value.

var category = Array.from(category_select.options).filter(function (option) {
    return option.selected;
}).map(function (option) {
    return option.value;
});

Styled Multi Select

Our solution needs to have two key features, the first is that it should be much better looking and second it should be easy to get the value. This is why I built the styled Multi Select which quickly shows all selected values, with a stylised drop down that matches the bootstrap style.

To get the value, you simply call the value function.

sms.value

Conclusion:

I have used this extensively. To get a hold of this element you can get it from my github.

Github