Multiselect Web Component in VanillaJS

Multiselect Web Component

A multiselect widget created using Web Components.

multiselect web component


Multiselect Demo


Import multiselect.html and use <x-multiselect> element. Define items with <li> elements. To make an item selected add selected attribute.

<!DOCTYPE html>
    <meta charset="UTF-8">
    <link rel="import" href="multiselect.html">
    <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>


Attribute placeholder

Add attribure placeholder to set multiselect placeholder (text to be displayed when no items are selected).

    <x-multiselect placeholder="Multiselect Placeholder">

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.