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