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:

• 30 Best Multiple Select jQuery Plugins

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

• CSS update

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.