Dynamic Tree Dropdown Select Plugin - jQuery x-tree-select

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.