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 |
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
- 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.