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:

$(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:

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>

<span class="sr-only">Toggle Dropdown</span>

</button>

</div>

<a href="#">Your Expertise</a>

</li>

</li>

<a href="#">Scripting</a>

</li>

</li>

<a href="#">JavaScript</a>

</li>

</li>

</li>

<a href="#">Framework</a>

</li>

<a href="#">Bootstrap</a>

</li>

<a href="#">Database</a>

</li>

<a href="#">MySQL</a>

</li>

<a href="#">MS SQL Server</a>

</li>

<a href="#">Oracle</a>

</li>

<a href="#">Programming</a>

</li>

</li>

<a href="#">Python</a>

</li>

<a href="#">C Sharp</a>

</li>

</ul>

</div>

</div>

</form>

A little jQuery code for initiating the plug-in:

$(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.

Forms

Demo

Developer page Download plug-in

How to set up this plug-in?

A demo of select with hierarchy

See online demo and code

Related Tutorials: