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.
Hierarchy Select jQuery Plugin for Twitter Bootstrap 4


Integrate Hierarchy Select jQuery Plugin

Libraries

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

<!--CSS-->
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="hierarchy-select.min.css">
 
<!--JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="hierarchy-select.min.js"></script>

HTML

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

<div class="dropdown hierarchy-select" id="example">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="example-one-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
    <div class="dropdown-menu" aria-labelledby="example-one-button">
        <div class="hs-searchbox">
            <input type="text" class="form-control" autocomplete="off">
        </div>
        <div class="hs-menu-inner">
            <a class="dropdown-item" data-value="" data-level="1" data-default-selected="" href="#">All categories</a>
            <a class="dropdown-item" data-value="1" data-level="1" href="#">Wine</a>
            <a class="dropdown-item" data-value="2" data-level="2" href="#">Color</a>
            <a class="dropdown-item" data-value="3" data-level="3" href="#">Red</a>
            <a class="dropdown-item" data-value="4" data-level="3" href="#">White</a>
            <a class="dropdown-item" data-value="5" data-level="3" href="#">Rose</a>
            <a class="dropdown-item" data-value="6" data-level="2" href="#">Country</a>
            <a class="dropdown-item" data-value="7" data-level="3" href="#">Marokko</a>
            <a class="dropdown-item" data-value="8" data-level="3" href="#">Russia</a>
            <a class="dropdown-item" data-value="9" data-level="2" href="#">Sugar Content</a>
            <a class="dropdown-item" data-value="10" data-level="3" href="#">Semi Sweet</a>
            <a class="dropdown-item" data-value="11" data-level="3" href="#">Brut</a>
            <a class="dropdown-item" data-value="12" data-level="2" href="#">Rating</a>
            <a class="dropdown-item" data-value="13" data-level="2" href="#">Grape Sort</a>
            <a class="dropdown-item" data-value="14" data-level="3" href="#">Riesling</a>
            <a class="dropdown-item" data-value="15" data-level="3" href="#">Aleatico</a>
            <a class="dropdown-item" data-value="16" data-level="3" href="#">Bouchet</a>
            <a class="dropdown-item" data-value="17" data-level="1" href="#">Whiskey</a>
            <a class="dropdown-item" data-value="18" data-level="2" href="#">Country</a>
            <a class="dropdown-item" data-value="19" data-level="3" href="#">Ireland</a>
            <a class="dropdown-item" data-value="20" data-level="3" href="#">Kanada</a>
            <a class="dropdown-item" data-value="21" data-level="3" href="#">Scotland</a>
        </div>
    </div>
    <input class="d-none" name="example_one" readonly="readonly" aria-hidden="true" type="text"/>
</div>



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.


Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.