Turns a single select box into multiple dynamic ones based on a separator
Latest commit cbc845d Jul 23, 2014 @AndrewIngram Merge pull request #11 from cybercode/master
Check if short label exists.
Failed to load latest commit information.
example camel case Feb 3, 2012
.gitignore first version! Feb 3, 2012
LICENSE Update LICENSE Feb 4, 2012



Turns a single select box (note, doesn't support multiple select) with breadcrumb options into multiple dynamic ones to allow the hierarchy to be traversed. The original select is kept up-to-date with the choices so the form can be submitted as normal.

Sample Usage

This example keeps the original select visible to illustrate the functionality:

<!DOCTYPE html>

<select class="drilldown">
  <option value="">------</option>
      <option value="1">Books</option>
      <option value="2">Books &gt; Fiction</option>
      <option value="3">Books &gt; Fiction &gt; Sci-Fi</option>
      <option value="4">Books &gt; Fiction &gt; Fantasy</option>
      <option value="5">Books &gt; Fiction &gt; Action</option>
      <option value="6">Books &gt; Fiction &gt; Romance</option>
      <option value="7">Books &gt; Travel</option>
      <option value="8">Books &gt; Travel &gt; Americas</option>
      <option value="9">Books &gt; Travel &gt; Europe</option>
      <option value="10">Books &gt; Travel &gt; Africa</option>
      <option value="11">Books &gt; Travel &gt; Australia</option>
      <option value="12">Books &gt; Biography</option>
      <option value="13">Games</option>
      <option value="14">Games &gt; X-Box 360</option>
      <option value="15">Games &gt; X-Box 360 &gt; Puzzle</option>
      <option value="16">Games &gt; X-Box 360 &gt; Roleplaying</option>
      <option value="17">Games &gt; X-Box 360 &gt; First-Person</option>
      <option value="18">Games &gt; Playstation 3</option>
      <option value="19">Games &gt; Playstation 3 &gt; Puzzle</option>
      <option value="20">Games &gt; Playstation 3 &gt; First-Person</option>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../lib/js/jquery.select-hierarchy.js"></script>

<script type="text/javascript">
  $('select.drilldown').selectHierarchy({ hideOriginal: false });