Download


Multiple Select (currently v1.3.1) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.

Source code

Source css, JavaScript, locales, and extensions, along with our docs.

Download source

Clone or fork via GitHub

Via GitHub

CDN

The folks over at UNPKG graciously provide CDN support for CSS and JavaScript of Multiple Select. Just use these CDN links.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js"></script>

NPM

Install and manage Multiple Select's CSS, JavaScript using NPM.

$ npm install multiple-select

What's included


The Multiple Select source code download includes the precompiled CSS, JavaScript, and provides both compiled and minified variations, along with documentation. More specifically, it includes the following and more:

multiple-select/
├── docs/
├── src
|   ├── utils
│   ├── MultipleSelect.js
│   ├── multiple-select.css
│   ├── multiple-select.js
│   ├── multiple-select.png
├── dist
│   ├── multiple-select-es.js
│   ├── multiple-select-es.min.js
│   ├── multiple-select.css
│   ├── multiple-select.js
│   ├── multiple-select.min.css
│   ├── multiple-select.min.js
│   └── multiple-select.png
└── README.md

The src/, are the source code for our CSS, JS. The dist/ folder includes everything compiled and minified with src/. The docs/ folder includes the source code for our documentation. Beyond that, any other included file provides support for packages, license information, and development.

Usage


Include multiple-select.min.css in the head tag your html document.

<link rel="stylesheet" href="multiple-select.min.css">

Include jQuery library and multiple-select.min.js in the head tag or at the very bottom of your document, just before the closing body tag (usually recommended for better performance).

<script src="jquery.min.js"></script>
<script src="multiple-select.min.js"></script>


The Multiple Select plugin displays data in a tabular format, via JavaScript.

Call a multiple select with id select with JavaScript.

<select id="select" multiple="multiple">
    <option value="1">January</option>
    ...
    <option value="12">December</option>
</select>
$('#select').multipleSelect()


Starter template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors.

Put it all together and your pages should look like this:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, Multiple Select!</title>

    <link rel="stylesheet" href="https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.css">
  </head>
  <body>
    <select id="select" multiple="multiple">
      <option value="1">January</option>
      <option value="2">February</option>
      <option value="3">March</option>
      <option value="4">April</option>
      <option value="5">May</option>
      <option value="6">June</option>
      <option value="7">July</option>
      <option value="8">August</option>
      <option value="9">September</option>
      <option value="10">October</option>
      <option value="11">November</option>
      <option value="12">December</option>
    </select>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js"></script>
    <script>
      $(function () {
        $('#select').multipleSelect({
          width: 500
        })
      })
    </script>
  </body>
</html>