Hierarcial Select

jQuery library to style a hierarchical select which allows for the selection of parent items.

by Paul Zepernick

HTML

<script src="http://www.paulzepernick.com/resources/jQuery.hierarcial-select.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<select id="hierarchySelect" class="form-control">
    <option data-isparent="true" data-level="1">Main Dept 1</option>
    <option data-isparent="false" data-level="2">Sub 01</option>
    <option data-isparent="false" data-level="2">Sub 02</option>
    <option data-isparent="true" data-level="2">Sub 03</option>
    <option data-isparent="false" data-level="3">Sub of Sub</option>
    <option data-isparent="true" data-level="1">Main Dept 2</option>
    <option data-isparent="false" data-level="2">Sub 01</option>
    <option data-isparent="false" data-level="2">Sub 02</option>
    <option data-isparent="false" data-level="2">Sub 03</option>
</select>

JavaScript

$("#hierarchySelect").selectHierarchy();