MultiSelectDropdown.js

 

Support for a multiple selection dropdown using fully native JavaScript, CSS, and HTML (no extra libraries needed).

Includes support for AMD, CommonJS, and global inclusion via an HTML script tag.

See Live Demo

Install

• NPM: $ npm install --save multi-select-dropdown
• Bower: $ bower install --save multi-select-dropdown
• CDN - Full (minified):
  • <script src="//unpkg.com/multi-select-dropdown@0.0.2/dist/multi-select-dropdown.min.js"></script>
  • <script src="//unpkg.com/multi-select-dropdown@0.0.2/dist/styles/multi-select-dropdown.min.css"></script>
• CDN - Full (not minified):
  • <script src="//unpkg.com/multi-select-dropdown@0.0.2"></script>
  • <script src="//unpkg.com/multi-select-dropdown@0.0.2/dist/styles/multi-select-dropdown.css"></script>
• CDN - Element Only (minified):
  • <script src="//unpkg.com/multi-select-dropdown@0.0.2/dist/multi-select-dropdown-element.min.js"></script>
  • <script src="//unpkg.com/multi-select-dropdown@0.0.2/dist/styles/multi-select-dropdown.min.css"></script>
• CDN - Element Only (not minified):
  • <script src="//unpkg.com/multi-select-dropdown@0.0.2/dist/multi-select-dropdown-element.js"></script>
  • <script src="//unpkg.com/multi-select-dropdown@0.0.2/dist/styles/multi-select-dropdown.css"></script>
• Download

Features

• Built with fully native, pure JavaScript! No extra libraries needed.
• Uses native HTML5 select and option elements. (I.E. It won't mess up your existing styles and won't create a million new elements that you don't expect to be present on a page).
• Uses overridable CSS for all needed style manipulations. (I.E. No manipulation of style attribute on HTML tags!)
• Nearly everything is done for you! Just set the correct data attributes, and you're done!
• "Select All Options" feature built in, no extra work needed.
• SCSS library provided for easier style overrides.
• Simple manager provided in case you just want to initialize for all desired elements on a page, rather than initializing support one by one.
• Super lightweight.
• Very easy to use.
• Support for...
  • AMD
  • CommonJS
  • Global HTML script tag

Screenshots

Native Select Box Used

---

Checkbox For Each Option

---

Select Label Updates Automatically

---

---

Built-in Select All Option

NOTE: This feature can be turned off if not needed

Documentation

• Live Demo
• Changelog

---

Code Samples

• TODO

---

Including the Library in your Project

Include as AMD Module

define([ 'multi-select-dropdown' ], function(MultiSelectDropdown) {
  MultiSelectDropdown.init();
  ...
});

Include as CommonJS Module

var MultiSelectDropdown = require('multi-select-dropdown');

MultiSelectDropdown.init();
...

Include via HTML Script Tag

<script type="text/javascript" src="multi-select-dropdown.min.js" />
<script type="text/javascript">
  MultiSelectDropdown.init();
  ...
</script>