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. Just weights in 5kb. 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. Load a theme CSS after the core stylesheet. All available themes:

• Bootstrap 
• Materialize
• Semantic UI

<link rel="stylesheet" href="/dist/themes/xts-bootstrap-theme.min.css">
<link rel="stylesheet" href="/dist/themes/xts-materialize-theme.min.css">
<link rel="stylesheet" href="/dist/themes/xts-semantic-ui-theme.min.css">

3. Create a normal input field on the page.

<input type="text" name="test" id="test" placeholder="Select An Option">

4. 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: []
  },
]

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

6. Attach the plugin to the input field you just created and define the data source as follows:

$("#test").treeSelect({
  datatree: myData
});

7. Set the main title.

$("#test").treeSelect({
  datatree: myData,
  mainTitle: 'Main category'
});

8. Set the text dierection. Defaults to 'ltr'.

$("#test").treeSelect({
  datatree: myData,
  direction: 'rtl'
});

9. Customize the names for the JavaScript objects.

$("#test").treeSelect({
  datatree: myData,
  json: {
    title: 'title',
    value: 'value',
    child: 'child'
  }
});

10. Set the transition effect. Default: fade.

$("#test").treeSelect({
  datatree: myData,
  transition: 'fade'
});

11. Enable/disable the live search functionality.

$("#test").treeSelect({
  searchable: true
});

12. Determine whether or not the parent node is selectable. Default: false.

$("#test").treeSelect({
  datatree: myData,
  selectablePrernt: true
});

13. Callback function available.

$("#test").treeSelect({
  datatree: myData,
  onOpen: function () {
  },
  OnSelect: function (selected) {
  },
  OnChange: function (oldVal, newVal) {
  },
  onClose: function () {
  },
});

Changelog:

v2.1.5 (2019-11-14)

• JS updated

v2.1.3 (2019-07-12)

• added search
• add themes materialize - bootstrap - semantic ui
• fix some bugs

v2.1.2 (2019-07-06)

• A few changes

v2.1.1 (2019-06-22)

• Added searchable functionality.

v1.3.5 (2019-04-24)

• Bugfix

v1.3.3 (2019-04-13)

• Loading bug fixed

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.