
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.
How to use it:
1. Load the stylesheet tree-select.css
in the header for the basic styling of the tree select.
<link rel="stylesheet" href="/dist/x-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 x-tree-select.js
at the end of the document.
<script src="/path/to/jquery.min.js"></script> <script src="/dist/x-tree-select"></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. Set the transition effect. Default: fade.
$("#test").treeSelect({ datatree: myData, transition: 'fade' });
10. Determine whether or not the parent node is selectable. Default: false.
$("#test").treeSelect({ datatree: myData, selectablePrernt: true });
11. Callback function available.
$("#test").treeSelect({ datatree: myData, onOpen: function () { }, OnSelect: function (selected) { }, OnChange: function (oldVal, newVal) { }, onClose: function () { }, });
Changelog:
v1.3.1 (2019-03-10)
- bugfixed
v1.2.1 (2019-03-08)
- webpack support available
v1.0.2 (2019-03-06)
- change package name to x-tree-select and bug fix
This awesome jQuery plugin is developed by 4xmen. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 10.03.2019
- Source