
Just another jQuery plugin that converts the regular multiselect box into an easy to use dropdown list with checkboxes to simplify the selection of multiple options.
How to use it:
1. Add the jQuery multi-select.js script to the webpage, after you've loaded the latest version of jQuery library.
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="src/jquery.multi-select.js"></script>
2. Let's say you have a multi-select list like this:
<select id="languages" name="languages" multiple> <option value="JavaScript">JavaScript</option> <option value="C++">C++</option> <option value="Python">Python</option> <option value="Ruby">Ruby</option> <option value="PHO">PHP</option> <option value="Pascal">Pascal</option> </select>
3. Call the function .multiSelect()
on the select element and we're done.
$('#languages').multiSelect();
4. Style the plugin in the CSS as follows:
.multi-select-container { display: inline-block; position: relative; } .multi-select-menu { position: absolute; left: 0; top: 0.8em; float: left; min-width: 100%; background: #fff; margin: 1em 0; padding: 0.4em 0; border: 1px solid #aaa; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); display: none; } .multi-select-menu input { margin-right: 0.3em; vertical-align: 0.1em; } .multi-select-button { display: inline-block; font-size: 0.875em; padding: 0.2em 0.6em; max-width: 20em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: -0.5em; background-color: #fff; border: 1px solid #aaa; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); cursor: default; } .multi-select-button:after { content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 0.4em 0.4em 0 0.4em; border-color: #999 transparent transparent transparent; margin-left: 0.4em; vertical-align: 0.1em; } .multi-select-container--open .multi-select-menu { display: block; } .multi-select-container--open .multi-select-button:after { border-width: 0 0.4em 0.4em 0.4em; border-color: transparent transparent #999 transparent; }
5. Possible plugin options with default values.
$('#languages').multiSelect({ containerHTML: '<div class="multi-select-container">', menuHTML: '<div class="multi-select-menu">', buttonHTML: '<span class="multi-select-button">', menuItemHTML: '<label class="multi-select-menuitem">', activeClass: 'multi-select-container--open', placeholderText: '-- Select --' });
Change log:
2017-11-18
- Only one active menu at a time per page
2016-10-25
- Allow selection of preset groups of options
- Prevent updateButtonContents being called twice
2016-10-14
- Better alignment for checkboxes in menu.
- Add namespace to all listeners.
2016-10-05
- Ignore whitespace when constructing button label
This awesome jQuery plugin is developed by mysociety. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 18.11.2017
- Source