JQuery DropDown Tree

mzDropDownCheckboxTree is a simple but powerful jQuery lightweight plugin. It can be used to display data in hierarchy

PLEASE NOTE THAT mzDropDownTree is still under active development use it at your own risk!

mzDropDown Checkbox Tree

  • mzDropDownCheckboxTree is a simple but powerful jQuery lightweight plugin. It can be used to display data in hierarchy.

  • It uses html 5 detail and summary tags to expand and collapse data in hierarchy
  • It can be customized to accommodate a wide variety of scenarios.
  • Its absolutely free to use and distribute for your own project.

Basic example

<?php <script>
    var defaultOptions = {data: countries}; 
    $("#your-tree").mzDropDownTree(defaultOptions);
</script>
<div id="your-tree" data-label="Default Tree" data-key="field_name[]"></div>

Getting started

Step 1

Include jQuery in your Page if its not already included

<?php <script src="https://code.jquery.com/jquery-1.12.4.min.js"  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="  crossorigin="anonymous"></script>

Include mzDropDownTree Plugin and CSS in your page

<?php <script  src="mzDropDownTree.plugin.js"></script>
 
<?php <link href="mzdropdowntree.plugin.css" />

Step 2

Create a <DIV> root of the tree in your page

<?php <div id="your-tree-id" data-label="Your tree label" data-description="your tree description"></div>

Step 3

Add Tree Configuration data

<?php var treeoptions = [{
    label: "Label",
    value: "Value",
    children: [
        {label: "Child Label", value:"Child Value"}
    ]
}];
var options = {
    data:treeoptions
};
tree = $("#your-tree-id").mzDropDownTree(options);

The above code snippet shows how the data object is constructed. A object with label and value properties can be nested to form checkbox nodes

More Examples

Try the options configurator

Submit the above form to see the values array

<?php Array
(
)

Adding Icons or images

<?php var data = [{
                label: "Label",
                value: "Value",
                icon: {
                    tag:"img", 
                    attributes:{
                        src:"source of the image", 
                        class:"class of the image"
                    },
                children: [
                    {
                        label: "Child Label",
                        value:"Child Value"
                        icon: {
                            tag:"img", 
                            attributes:{
                                src:"source of the image", 
                                class:"class of the image"
                            },
                    }
                ]
            }];