Multiple Select Enhancement Library – Select7

Category: Form , Javascript | October 6, 2018
Author: LogX7
Views Total: 1,117
Official Page: Go to website
Last Update: October 6, 2018
License: MIT


Multiple Select Enhancement Library – Select7


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>
  <div class="select7_items"></div>

Done. To get selected data, following these steps:

// an array of objects containing values and text

// gets only values

// gets only text



  • added IE and Edge compatibility

Leave a Reply