User-friendly Option Selector In Pure JavaScript – Tag Selector

Category: Form , Javascript | October 14, 2017
Views Total:668 views
Official Page:Go to website
Last Update:October 14, 2017


User-friendly Option Selector In Pure JavaScript – Tag Selector


Tag Selector is a tiny JavaScript library that transforms the select options into tag-style labels for better user experience.

How to use it:

Download and import the Tag Selector into your project.

$ npm install tagselector --save

You can also include the Tag Selector’s files directly in the document.

<link rel="stylesheet" href="tagselector.css">
<script src="tagselector.js"></script>

Initialize the library by creating an new Tag Selector instance and specify the target select element:

<select id="demo">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
var myInstance = new TagSelector(document.getElementById('demo'));

Set the maximum number of options could be selected.

var myInstance = new TagSelector(document.getElementById('demo'),{
    max: 3

Callback functions available.

var myInstance = new TagSelector(document.getElementById('demo'),{
    onInit: false,
    onDestroy: false,
    onSelect: false,
    onDeselect: false

You Might Be Interested In:

Leave a Reply