Multiselect Web Component
A multiselect widget created using Web Components.
Demo
Usage
Import multiselect.html and use <x-multiselect> element. Define items with <li> elements. To make an item selected add selected attribute.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="import" href="multiselect.html">
</head>
<body>
<x-multiselect placeholder="Select Value">
<li value="1" selected>Item 1</li>
<li value="2">Item 2</li>
<li value="3" selected>Item 3</li>
<li value="4">Item 4</li>
</x-multiselect>
</body>
</html>API
Attribute placeholder
Add attribure placeholder to set multiselect placeholder (text to be displayed when no items are selected).
<x-multiselect placeholder="Multiselect Placeholder">
...
</x-multiselect>Method selectedItems()
Returns selected item values as an Array.
// returns an array of values, e.g. [1, 3]
var selectedItems = multiselect.selectedItems();Event change
Is fired each time selected items are changes.
multiselect.addEventListener('change', function() {
// print selected items to console
console.log('Selected items:', this.selectedItems());
});Browser Support
Browser support is limited by support of Web Components.
Add webcomponentjs polyfill to be able to use the component in all modern browsers.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent