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.
<!--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.