User-friendly Multi-select List Plugin With jQuery - multi-list

File Size: 8.47 KB
Views Total: 13918
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
User-friendly Multi-select List Plugin With jQuery - multi-list

A convenient jQuery multiple select plugin that transforms any unordered list into a filterable select list with checkboxes for easier item selection.

View more Multi Select plugins at:

How to use it:

1. Add references to jQuery library and the jQuery multi-list plugin's files into the webpage.

<link rel="stylesheet" href="multi-list.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="multi-list.js"></script>

2. Create a regular html unordered list as this:

<ul id="list">
  <li value="AF">Afghanistan</li>
  <li value="AX">Åland Islands</li>
  <li value="AL">Albania</li>
  <li value="DZ">Algeria</li>
  <li value="AS">American Samoa</li>
  ...
</ul>

3. Call the function on the list and the plugin will do the rest.

$("#list").multiList();

4. API methods.

// Get the selected values from the ul (the "value" attr from the li items): 
$("<ul>").multiList("getSelected");

// Get both the selected values and their full text field (the "value" attr from the li items and their text): 
$("<ul>").multiList("getSelectedFull");

// Get the unselected values from the ul (the "value" attr from the li items): 
$("<ul>").multiList("getUnselected");

// Get both the unselected values and their full text field (the "value" attr from the li items and their text): 
$("<ul>").multiList("getUnselectedFull");

// Select an element: 
$("<ul>").multiList("select", "<li> value");

// Unselect an element: 
$("<ul>").multiList("unselect", "<li> value");

// Select ALL the elements: 
$("<ul>").multiList("selectAll");

// Unelect ALL the elements: 
$("<ul>").multiList("unselectAll");

// Hide an element (accepts an ARRAY, this doesn't affect the selected/unselected property): 
$("<ul>").multiList("hide", "<li> value");

// Show an element (accepts an ARRAY): 
$("<ul>").multiList("show", "<li> value");

// Hide ALL the elements: 
$("<ul>").multiList("hideAll");

// Show ALL the elements: 
$("<ul>").multiList("showAll");

// Disable an element: 
$("<ul>").multiList("disable");

// Enable an element: 
$("<ul>").multiList("enable");

// Change an element name: 
$("<ul>").multiList("setName", "<li> value", "<li> new name");

5. Events.

  • "multiList.elementUnchecked": Triggered when unchecking an item. Params passed: "value" (the "value" attr from the li items) and "text" (the full text)
  • "multiList.elementChecked": Triggered when checking an item. Params passed: "value" (the "value" attr from the li items) and "text" (the full text)

Change log:

2018-04-04

  • fixed typo

2018-04-03

  • fixed select all with hidden elements

2018-03-02

2017-07-25

  • label tag now with style "display inherit"

2017-06-27

  • Improved the selectable area for each list item

This awesome jQuery plugin is developed by koopaconan. For more Advanced Usages, please check the demo page or visit the official website.