fomkin / multiselect-web-component

Multiselect Web Component in VanillaJS

Home Page:http://tabalinas.github.io/multiselect-web-component

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Multiselect Web Component

A multiselect widget created using Web Components.

multiselect web component

Demo

Multiselect 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.

About

Multiselect Web Component in VanillaJS

http://tabalinas.github.io/multiselect-web-component


Languages

Language:HTML 100.0%