Dropdown Tree

Basic Example:

Children Select:

Add Children:

RTL:

Init:

HTML:


<div class="dropdown dropdown-tree" id="firstDropDownTree"></div>

JavaScript:


var arr=[
{title:1,dataAttrs:[{title:"dataattr1",data:"value1"},{title:"dataattr2",data:"value2"},{title:"dataattr3",data:"value3"}]},
{title:2,dataAttrs:[{title:"dataattr4",data:"value4"},{title:"dataattr5",data:"value5"},{title:"dataattr6",data:"value6"}]},
{title:3,dataAttrs:[{title:"dataattr7",data:"value7"},{title:"dataattr8",data:"value8"},{title:"dataattr9",data:"value9"}]}
];
var options = {
    title : "DropDown Tree",
    data: arr,
    clickHandler: function(element){
        console.log(element);
    },
}
$("#firstDropDownTree").DropDownTree(options);

Properties:

Property Type Default Value Effect
title string Dropdown The title of the dropdown
clickHandler function null Function which will be passed and handle an element click, pass a element variable and this will return the clicked element
checkHandler function null Function which will be passed and handle an element check, pass a element variable and this will return the clicked element, the second parameter is a bool which will tell the checked status
expandHandler function null Function which will be passed and handle an element expand, pass a element variable and this will return the clicked element, the second parameter is a bool which will tell the expand status
maxHeight int 300 The maximum height of the dropdown ul
closedArrow string null The array of data which will be passed to the dropdown
closedArrow html string <i class="fa fa-caret-right" aria-hidden="true"></i> if a li has a sub menu this will be the icon of the closed arrow when closed .. defaults to font awesome
openedArrow html string <i class="fa fa-caret-down" aria-hidden="true"></i> if a li has a sub menu this will be the icon of the opened arrow when opened
multiSelect boolean false adds checkboxes and allows multi selection for multi elements in the dropdown
selectChildren boolean false will check all children of the selected parent
addChildren boolean false will tell the plugin if that the children are dynamic .. defaults to false .. set to true if you will use AddChildren()
rtl boolean false will tell the plugin if the page is RTL .. defaults to `false` .. you need to add rtl-bootstrap as well