Dropdown Tree with Bootstrap and jQuery, Easy implementation

Dropdown Tree

Dropdown Tree with Bootstrap and jQuery, Easy implementation

Implement an interactive DropDownTree with user-friendly UI.

The DropDownTree is used to represent data in heirarchical structure, rendered in a tree-like structure, which provides multiple selection option and custom nodes.

Here we are implementing the dropdown tree with bootstrap and jquery with click handlers, data handlers. Single select and Multi-select enabled with children and ajax request for getting data.

The following example is taken from : https://github.com/JosephSKh/DropdownTree

CODE :-

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">

<title>
Dropdown Tree
</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link rel="stylesheet" href="dropdowntree.css">

</head>
<body>


<div class="container">
<h1>Dropdown Tree</h1>
<div class="col-md-6">
<hr/>
<h3>Children Select:</h3><div class="dropdown dropdown-tree" id="firstDropDownTree"></div>
</div>

<div class="col-md-6">


</div>
<hr/>


</div>

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="dropdowntree.js"></script>
<script type="text/javascript">

    var arr4=[
        {title:"St Fatima",href:"#1",dataAttrs:[{title:"dataattr1",data:"value1"},{title:"dataattr2",data:"value2"},{title:"dataattr3",data:"value3"}]}
        ,
        {title:"Korba",href:"#2",dataAttrs:[{title:"dataattr4",data:"value4"},{title:"dataattr5",data:"value5"},{title:"dataattr6",data:"value6"}]}
        ,
        {title:"Roxi",href:"#3",dataAttrs:[{title:"dataattr7",data:"value7"},{title:"dataattr8",data:"value8"},{title:"dataattr9",data:"value9"}]}
        ];

    var arr3=[
        {title:"Abbas Al Akkad",href:"#1",dataAttrs:[{title:"dataattr1",data:"value1"},{title:"dataattr2",data:"value2"},{title:"dataattr3",data:"value3"}]}
        ,
        {title:"Makram Obeid",href:"#2",dataAttrs:[{title:"dataattr4",data:"value4"},{title:"dataattr5",data:"value5"},{title:"dataattr6",data:"value6"}],data:arr4}
        ,
        {title:"Mostafa Al Nahas",href:"#3",dataAttrs:[{title:"dataattr7",data:"value7"},{title:"dataattr8",data:"value8"},{title:"dataattr9",data:"value9"}]}
        ];

        var arr2=[
        {title:"Teriumph",href:"#1",dataAttrs:[{title:"dataattr1",data:"value1"},{title:"dataattr2",data:"value2"},{title:"dataattr3",data:"value3"}] ,data:arr3}
        ,
        {title:"Safir",href:"#2",dataAttrs:[{title:"dataattr4",data:"value4"},{title:"dataattr5",data:"value5"},{title:"dataattr6",data:"value6"}]}
        ,
        {title:"El-Hegaz Sq",href:"#3",dataAttrs:[{title:"dataattr7",data:"value7"},{title:"dataattr8",data:"value8"},{title:"dataattr9",data:"value9"}]}
        ];

    var arr=[
        {title:"Heliopolis",href:"#1",dataAttrs:[{title:"dataattr1",data:"value1"},{title:"dataattr2",data:"value2"},{title:"dataattr3",data:"value3"}], data: arr2}
        ,
        {title:"Nasr City",href:"#2",dataAttrs:[{title:"dataattr4",data:"value4"},{title:"dataattr5",data:"value5"},{title:"dataattr6",data:"value6"}]}
        ,
        {title:"Down Town",href:"#3",dataAttrs:[{title:"dataattr7",data:"value7"},{title:"dataattr8",data:"value8"},{title:"dataattr9",data:"value9"}],data:arr3}
        ];

    var options = {
    title : "Areas 2",
    data: arr,
    maxHeight: 300,
    clickHandler: function(element){
        //gets clicked element parents
        console.log($(element).GetParents());
        //element is the clicked element
        console.log(element);
        $("#firstDropDownTree").SetTitle($(element).find("a").first().text());
        console.log("Selected Elements",$("#firstDropDownTree").GetSelected());
    },
    expandHandler: function(element,expanded){
        console.log("expand",element,expanded);
    },
    checkHandler: function(element,checked){
        console.log("check",element,checked);
    },
    closedArrow: '<i class="fa fa-caret-right" aria-hidden="true"></i>',
    openedArrow: '<i class="fa fa-caret-down" aria-hidden="true"></i>',
    multiSelect: true,
    selectChildren: true,
}

$("#firstDropDownTree").DropDownTree(options);
</script>
</body>
</html>

Explanation :

Download css and js from https://github.com/JosephSKh/DropdownTree

Include the following links :

Bootstrap CSS : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

Fontawesome : https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css

jQuery : https://code.jquery.com/jquery-1.9.1.min.js

Bootstrap JS : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js

Create a div with id firstDropDownTree

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

Define values to variables

var arr=[
        {title:"Heliopolis",href:"#1",dataAttrs:[{title:"dataattr1",data:"value1"},{title:"dataattr2",data:"value2"},{title:"dataattr3",data:"value3"}], data: arr2}
        ,
        {title:"Nasr City",href:"#2",dataAttrs:[{title:"dataattr4",data:"value4"},{title:"dataattr5",data:"value5"},{title:"dataattr6",data:"value6"}]}
        ,
        {title:"Down Town",href:"#3",dataAttrs:[{title:"dataattr7",data:"value7"},{title:"dataattr8",data:"value8"},{title:"dataattr9",data:"value9"}],data:arr3}
        ];

Define options as follows :

var options = {
    title : "Areas 2",
    data: arr,
    maxHeight: 300,
    clickHandler: function(element){
        //gets clicked element parents
        console.log($(element).GetParents());
        //element is the clicked element
        console.log(element);

Call DropDownTree()

$("#firstDropDownTree").DropDownTree(options);

For full description please visit : https://github.com/JosephSKh/DropdownTree

Reference : https://github.com/JosephSKh/DropdownTree

For jQuery related solutions please visit jQuery

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top