The select dropdown with hierarchy by jQuery
By using the hierarchy-select jQuery plug-in, you may create a dropdown with options in the hierarchy. Normally, the select dropdown displays options in the same order as provided. This plug-in allows presenting the options in a hierarchal way and implemented with Bootstrap framework.
You have to use a few data attributes to define the levels. See the demo and code below.
Demo
Developer page Download plug-in
How to set up this plug-in?
First of all, download the plug-in from the above link and place the hierarchy-select.min.css and hierarchy-select.min.js files in the appropriate locations as per your project directory structure.
Refer both files; CSS in the head section while JS file after the jQuery library and before the body closing tag for better performance.
<link rel=”stylesheet” href=”css/sel-hierarchy/hierarchy-select.min.css”>
<script src=”js/sel-hierarchy/hierarchy-select.min.js”></script>
Initiate the plug-in via JavaScript with options:
1 2 3 4 5 6 7 |
$(document).ready(function() { $('#demo-hierarchy').hierarchySelect({ hierarchy: true }); |
See the demo and markup below.
A demo of select with hierarchy
In this demo, the dropdown options are created with hierarchy. If you look at the markup by visiting the demo page or below, you can see it is basically the <li> tags that define the options. The <ul> and <li> are contained in a main div with dropdown-menu and open classes.
For each <li> tag that acts as an option in the dropdown, the data-level=”” attribute is given a number. The number specifies the hierarchy. For example, “1” means the root level, 2 is the child of 1 and so on. Have a look:
See online demo and code
The markup:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 |
<form> <div class="form-group"> <div class="btn-group hierarchy-select" data-resize="auto" id="your-expertise-hierarchy"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="selected-label pull-left"> </span> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu open"> <div class="hs-searchbox"> <input type="text" class="form-control" autocomplete="off"> </div> <ul class="dropdown-menu inner" role="menu"> <li data-value="" data-level="1" class="level-1 active"> <a href="#">Your Expertise</a> </li> <li data-value="1" data-level="1" class="level-1"> <a href="#">Web</a> </li> <li data-value="2" data-level="2" class="level-2"> <a href="#">Scripting</a> </li> <li data-value="3" data-level="3" class="level-3"> <a href="#">PHP</a> </li> <li data-value="4" data-level="3" class="level-3"> <a href="#">JavaScript</a> </li> <li data-value="5" data-level="3" class="level-3"> <a href="#">.Net</a> </li> <li data-value="5" data-level="3" class="level-3"> <a href="#">JSP</a> </li> <li data-value="6" data-level="2" class="level-2"> <a href="#">Framework</a> </li> <li data-value="7" data-level="3" class="level-3"> <a href="#">Bootstrap</a> </li> <li data-value="9" data-level="1" class="level-1"> <a href="#">Database</a> </li> <li data-value="10" data-level="2" class="level-2"> <a href="#">MySQL</a> </li> <li data-value="11" data-level="2" class="level-2"> <a href="#">MS SQL Server</a> </li> <li data-value="12" data-level="2" class="level-2"> <a href="#">Oracle</a> </li> <li data-value="13" data-level="1" class="level-1"> <a href="#">Programming</a> </li> <li data-value="14" data-level="2" class="level-2"> <a href="#">Java</a> </li> <li data-value="15" data-level="2" class="level-2"> <a href="#">Python</a> </li> <li data-value="16" data-level="2" class="level-2"> <a href="#">C Sharp</a> </li> </ul> </div> <input class="hidden hidden-field" name="search_form[category]" readonly aria-hidden="true" type="text"/> </div> </div> </form> |
A little jQuery code for initiating the plug-in:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script type="text/javascript"> $(document).ready(function() { $('#your-expertise-hierarchy').hierarchySelect({ hierarchy: true, search: true, width: 250 }); }); </script> |
See the output and complete code on the demo page.
You can see, the select box also has a search field that will filter the options in the dropdown as you enter the characters. This can be achieved by using the search option in the jQuery code and setting its value as true as used in the demo.