
A dynamic tree select jQuery plugin that allows the user to select an item from a multi-level dropdown list similar to the collapsible tree structure.
Licensed under the GPL-3.
1. Load the stylesheet tree-select.css
in the header for the basic styling of the tree select.
<link rel="stylesheet" href="/dist/tree-select.css">
2. Create a normal input field on the page.
<input type="text" name="test" id="test" placeholder="Select An Option">
3. Prepare your own hierarchical data for the multi-level dropdown list.
const myData = [{ title: 'text1', value: 1, child: [] }, { title: 'text2', value: 2, child: [] }, { title: 'text3', value: 3, child: [ { title: 'lv2 text3', value: 3, child: [] }, { title: 'lv2 text4', value: 4, child: [ { title: 'lv3 text3', value: 3, child: [] }, { title: 'lv3 text4', value: 4, child: [] }, { title: 'lv3 text5', value: 5, child: [] }, ] }, { title: 'lv2 text5', value: 5, child: [] } ] }, { title: 'text4', value: 4, child: [] }, { title: 'text5', value: 5, child: [] }, ]
4. Load jQuery JavaScript library and the JavaScript tree-select.js
at the end of the document.
<script src="/path/to/jquery.min.js"></script> <script src="/dist/tree-select.js"></script>
5. Attach the plugin to the input field you just created and define the data source as follows:
$("#test").treeSelect({ datatree: myData });
6. Set the main title.
$("#test").treeSelect({ datatree: myData, mainTitle: 'Main category' });
7. Set the text dierection. Defaults to 'ltr'.
$("#test").treeSelect({ datatree: myData, direction: 'rtl' });
8. Customize the names for the JavaScript objects.
$("#test").treeSelect({ datatree: myData, json: { title: 'title', value: 'value', child: 'child' } });
9. Callback function available.
$("#test").treeSelect({ datatree: myData, onOpen: function () { }, OnSelect: function (selected) { }, OnChange: function (oldVal, newVal) { }, onClose: function () { }, });
This awesome jQuery plugin is developed by 4xmen. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 19.02.2019
- Source