Multiple Select Enhancement Library – Select7

Category: Form , Javascript | July 8, 2018
Author: LogX7
Views Total: 717
Official Page: Go to website
Last Update: July 8, 2018
License: MIT

Preview:

Multiple Select Enhancement Library – Select7

Description:

Select7 is a vanilla JavaScript plugin to create a user-friendly multi-select control from a regular select element.

With the Select7 library, your users are able to select multiple options from a dropdown list. Each selected option has a close button that enables you to cancel the selection quickly.

How to use it:

Insert the Select7’s JavaScript and Stylesheet into the html file.

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

The required HTML for the multi-select control.

<div id="select7" class="select7_container">
  <div class="select7_arrow">&#9662;</div>
  <div class="select7_placeholder">Select Placeholder</div>
  <select class="select7_select" onchange="add_selected_item(this, event);">
      <option class="select7_hide" value="filler"></option>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
  </select>
  <div class="select7_items"></div>
</div>

Done. To get selected data, following these steps:

// an array of objects containing values and text
get_selected_items('select-id');

// gets only values
get_selected_items('select-id','value');

// gets only text
get_selected_items('select-id','text');

Changelog:

07/08/2018

  • added IE and Edge compatibility

Leave a Reply