Skip to content
Turns a single select box into multiple dynamic ones based on a separator
Find file
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
lib/js Check if short label exists. Jul 12, 2014
.gitignore first version! Feb 3, 2012
AUTHORS added authors file Mar 21, 2012
LICENSE Update LICENSE Feb 4, 2012
README.rst Update README.rst Feb 3, 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=""></script>
<script src="../lib/js/"></script>

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

Something went wrong with that request. Please try again.