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

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

By Posted on

This time I will share jQuery Plugin and tutorial about User-friendly Multi-select List Plugin With jQuery – multi-list, hope it will help you in programming stack.

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

Demo Download

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.

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

2. Create a regular html unordered list as this:

view source
1 <ul id="list">
2   <li value="AF">Afghanistan</li>
3   <li value="AX">Åland Islands</li>
4   <li value="AL">Albania</li>
5   <li value="DZ">Algeria</li>
6   <li value="AS">American Samoa</li>
7   ...
8 </ul>

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

view source
1 $("#list").multiList();

4. API methods.

view source
01 // Get the selected values from the ul (the "value" attr from the li items):
02 $("<ul>").multiList("getSelected");
03  
04 // Get both the selected values and their full text field (the "value" attr from the li items and their text):
05 $("<ul>").multiList("getSelectedFull");
06  
07 // Get the unselected values from the ul (the "value" attr from the li items):
08 $("<ul>").multiList("getUnselected");
09  
10 // Get both the unselected values and their full text field (the "value" attr from the li items and their text):
11 $("<ul>").multiList("getUnselectedFull");
12  
13 // Select an element:
14 $("<ul>").multiList("select", "<li> value");
15  
16 // Unselect an element:
17 $("<ul>").multiList("unselect", "<li> value");
18  
19 // Select ALL the elements:
20 $("<ul>").multiList("selectAll");
21  
22 // Unelect ALL the elements:
23 $("<ul>").multiList("unselectAll");
24  
25 // Hide an element (accepts an ARRAY, this doesn't affect the selected/unselected property):
26 $("<ul>").multiList("hide", "<li> value");
27  
28 // Show an element (accepts an ARRAY):
29 $("<ul>").multiList("show", "<li> value");
30  
31 // Hide ALL the elements:
32 $("<ul>").multiList("hideAll");
33  
34 // Show ALL the elements:
35 $("<ul>").multiList("showAll");
36  
37 // Disable an element:
38 $("<ul>").multiList("disable");
39  
40 // Enable an element:
41 $("<ul>").multiList("enable");
42  
43 // Change an element name:
44 $("<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.

source : jquery.net

Related posts: