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.
This example keeps the original select visible to illustrate the functionality:
<!DOCTYPE html>
<html>
<body>
<select class="drilldown">
<option value="">------</option>
<option value="1">Books</option>
<option value="2">Books > Fiction</option>
<option value="3">Books > Fiction > Sci-Fi</option>
<option value="4">Books > Fiction > Fantasy</option>
<option value="5">Books > Fiction > Action</option>
<option value="6">Books > Fiction > Romance</option>
<option value="7">Books > Travel</option>
<option value="8">Books > Travel > Americas</option>
<option value="9">Books > Travel > Europe</option>
<option value="10">Books > Travel > Africa</option>
<option value="11">Books > Travel > Australia</option>
<option value="12">Books > Biography</option>
<option value="13">Games</option>
<option value="14">Games > X-Box 360</option>
<option value="15">Games > X-Box 360 > Puzzle</option>
<option value="16">Games > X-Box 360 > Roleplaying</option>
<option value="17">Games > X-Box 360 > First-Person</option>
<option value="18">Games > Playstation 3</option>
<option value="19">Games > Playstation 3 > Puzzle</option>
<option value="20">Games > Playstation 3 > First-Person</option>
<select>
<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 });
</script>
</body>
</html>