Hierarchy Select jQuery Plugin for Twitter Bootstrap 4

Hierarchy Select is a lightweight jQuery plugin which converts default Bootstrap dropdown list into a filterable/searchable hierarchical dropdown list. If you want to add filter in multiple listed categories dropdown then this plugin is super helpful for you.

Integrate Hierarchy Select jQuery Plugin

Libraries

First load the bootstrap library after that add Hierarchy Select jQuery Plugin CSS+JS library on page.

HTML

Create a Bootstrap dropdown that uses data-level attribute to specify the data level for each list item.

    
    

        

            
        
        

            All categories
            Wine
            Color
            Red
            White
            Rose
            Country
            Marokko
            Russia
            Sugar Content
            Semi Sweet
            Brut
            Rating
            Grape Sort
            Riesling
            Aleatico
            Bouchet
            Whiskey
            Country
            Ireland
            Kanada
            Scotland
        
    
    

JS

Now call the plugin’s function to activate Hierarchy Select list.

$(document).ready(function() {
        $('#example').hierarchySelect({
            width: 'auto'
        });
    });

Following are the default plugins options which you can use to customize the dropdown list.

$(document).ready(function() {
 $('#example').hierarchySelect({
  width: 'auto',
  height: '200px',
  hierarchy: false,
  search: false 
 });
});

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.