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:

 

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:

Bootstrap select hierarchy

See online demo and code

The markup:

 

A little jQuery code for initiating the plug-in:

 

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.