
TvMultiSelectPanel is a jQuery plugin to dynamically render a multi select panel where the users are able to select single or multiple entries in an elegant way.
More features:
- Select all and unselect all.
- Live search.
- Preview mode.
- Supports JSON data.
- Allows to check a group of entries with checkboxes.
How to use it:
1. Insert jQuery library and the jQuery TvMultiSelectPanel plugin's JavaScript & Stylesheet into the document.
<link rel="stylesheet" href="TvMultiSelectPanel.min.css"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="TvMultiSelectPanel.min.js"></script>
2. Create a container to hold the multi select panel.
<div id="data" class="tv-select-panel"> </div>
3. Define the data in the JavaScript (JSON) as follows:
let source = [ {"key": 1, "value": "thành"}, {"key": 2, "value": "Kris"}, {"key": 3, "value": "Pierette"}, {"key": 4, "value": "Enos"}, {"key": 5, "value": "Ezekiel"}, {"key": 6, "value": "Burg"}, {"key": 7, "value": "Alvinia"}, {"key": 8, "value": "Giana"}, {"key": 9, "value": "Phaidra"}, {"key": 10, "value": "Maryanna"} ]
4. Render the data in the multi select panel. Done.
var result = $('#data').panelMultiSelect({ dataSource: source });
5. Get the selected data.
result.getSelectedResult();
6. Default customization options.
var result = $('#data').panelMultiSelect({ keyAttributeName: 'key', valueAttributeName: 'value', dataSource: [], customValueCallBackFunc: null, customKeyCallBackFunc: null, elementClassName: 'tv-select-element', elementShowClassName: 'tv-select-element_show', selectPanelContentWrapperClassName: 'tv-select-panel-content-wrapper', selectedElementCss: {color: 'white', background: '#6F9301', border: ''}, notSelectedElementCss: {color: 'black', background: 'white', border: ''}, selectedCountColor: '#608001', selectedElementStyle: 'color: white; background: #6F9301; border: ', notSelectedElementStyle: 'color: black; background: white; border: ', checkboxClassName: 'tv-check-box-element', checkboxDivWrapperClassName: 'tv-check-box-wrapper', checkboxDivWrapperWidth: '25', tvSelectFooterClassName: 'tv-select-footer', tvSelectHeaderClassName: 'tv-select-header' });
This awesome jQuery plugin is developed by thanhtoitoi24. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 07.12.2018
- Source