Download


Multiple Select (currently v1.2.2) 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 CDNJS and bootcss 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="//cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.2/multiple-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.2/multiple-select.min.js"></script>

Bower

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

$ bower 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/
├── multiple-select.css
├── multiple-select.js
└── multiple-select.png

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 data attributes or JavaScript.

Via data attributes

Activate Multiple Select without writing JavaScript. Set data-toggle="select" on a normal select.

<select multiple="multiple" data-toggle="select">
    <option value="1">January</option>
    ...
    <option value="12">December</option>
</select>

We can also use remote url data by setting data-url="data1.json" on a normal select.

<select data-toggle="select" data-url="data1.json"></select>

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();

We can also use remote url data by setting url: 'data1.json'.

<select id="select" multiple="multiple"></select>
$('#select').multipleSelect({
    url: 'data1.json'
});