Why and how we use multiple-select instead of the good old select element
We’ve all know HTML select element.
However, it can be a really, really frustrating component to let into your designs. Let me tell you why.
Good things first
By using the select element it’s a no-brainer to create a list of selectable options. It’s easy and it’s cheap. It’s supported by all new and old browsers in use, and it comes with a lot of nice features, such as grouping options, keyboard navigation, single and multi-select and reliable rendering across platforms without me having to put on my thinking hat. It just works!
So why not just use it?
Inconsistent display on different operating systems or browsers.
For example, using Chrome, IE or Firefox in OSX, Windows or Linux is not the same.
The number of selectable options we have is often counted in hundreds which makes the standard select element hard to navigate.
A common example is country selectors. When there are hundreds of options in the list, it’s hard to find what you want.
Styling the select element is poorly supported.
For example, we want to add an icon to the option or add some description.
The solution
We have released the latest version(v1.5.0) of multiple-select, many features can help us to solve the problem.
- Consistent display
- Checkboxes support
- Multiple items support
- Filter support
- Bootstrap theme support
- Large data support with a virtual scroll
- Easy to use
For jQuery, just add a line of code:
<select>
<option value="1">First</option>
...
</select>$('select').multipleSelect()
For Vue.js, just replace select with MultipleSelect
<MultipleSelect>
<option value="1">First</option>
...
</MultipleSelect>Learn more from our website.