AndrewIngram/gist:1098398

## gistfile1.html
<!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.6.2/jquery.min.js"></script>

<script type="text/javascript">

$('select.drilldown').each(function(index) {
	var select = $(this);
	var max_depth = 1;

	// Collect all the text values
	var options = select.find('option').map(function() {
		var val = $(this).val();

		if (val) {
			var txt = $(this).text();

			var segments = txt.split(' > ');
			var depth = segments.length;

			if (depth > max_depth) {
				max_depth = depth;
			}

			var result = {
				'label': txt,
				'short_label': segments[depth-1],
				'value': val,
				'depth': depth,
				'children': [],
			};

			return result;
		}
	});

	var roots = [];

	// Build up children values
	for (var depth=1; depth <= max_depth; depth++) {
		$.each(options, function() {
			var parent = this;

			if (this.depth == depth) {

				if (depth == 1) {
					roots.push(this);
				}

				$.each(options, function() {
					var child = this;

					if (child.depth == depth+1 && child.label.match("^"+parent.label)==parent.label) {
						parent.children.push(child);
					}
				})
			}
		});
	}

	select.hide();

	select.wrap('<span class="drilldown-wrapper" />');

	select.after('<select class="drilldown-1"><option value="">------</option></select>');
	var root_select = select.next();

	root_select.data('depth', 1);

	$.each(roots, function(){
		var opt = $('<option>');
		opt.val(this.value);
		opt.text(this.short_label);
		opt.data('node', this);
		root_select.append(opt);
	});

	var change_handler = function(){
		var this_select = $(this);

		var opt = this_select.find('option:selected');
		var node = opt.data('node');

		if (this_select.val()) {
			select.val(this_select.val());
		} else if (this_select.data('depth') > 1) {
			select.val(this_select.prev().val());
		}

		this_select.nextAll('select').remove();

		// Check to see if there's any children, if there are we build another select box;
		if (node && node.children.length > 0) {
			this_select.after('<select><option value="">------</option></select');

			var next_select = this_select.next();
			next_select.addClass('drilldown-' + (node.depth + 1));
			next_select.data('depth', node.depth);

			$.each(node.children, function(){
				var opt = $('<option>');
				opt.val(this.value);
				opt.text(this.short_label);
				opt.data('node', this);
				next_select.append(opt);
			});

			next_select.change(change_handler);
		}
	}
	root_select.change(change_handler);
});

</script>


</body>
</html>
	<!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.6.2/jquery.min.js"></script>

	<script type="text/javascript">

	$('select.drilldown').each(function(index) {
	var select = $(this);
	var max_depth = 1;

	// Collect all the text values
	var options = select.find('option').map(function() {
	var val = $(this).val();

	if (val) {
	var txt = $(this).text();

	var segments = txt.split(' > ');
	var depth = segments.length;

	if (depth > max_depth) {
	max_depth = depth;
	}

	var result = {
	'label': txt,
	'short_label': segments[depth-1],
	'value': val,
	'depth': depth,
	'children': [],
	};

	return result;
	}
	});

	var roots = [];

	// Build up children values
	for (var depth=1; depth <= max_depth; depth++) {
	$.each(options, function() {
	var parent = this;

	if (this.depth == depth) {

	if (depth == 1) {
	roots.push(this);
	}

	$.each(options, function() {
	var child = this;

	if (child.depth == depth+1 && child.label.match("^"+parent.label)==parent.label) {
	parent.children.push(child);
	}
	})
	}
	});
	}

	select.hide();

	select.wrap('<span class="drilldown-wrapper" />');

	select.after('<select class="drilldown-1"><option value="">------</option></select>');
	var root_select = select.next();

	root_select.data('depth', 1);

	$.each(roots, function(){
	var opt = $('<option>');
	opt.val(this.value);
	opt.text(this.short_label);
	opt.data('node', this);
	root_select.append(opt);
	});

	var change_handler = function(){
	var this_select = $(this);

	var opt = this_select.find('option:selected');
	var node = opt.data('node');

	if (this_select.val()) {
	select.val(this_select.val());
	} else if (this_select.data('depth') > 1) {
	select.val(this_select.prev().val());
	}

	this_select.nextAll('select').remove();

	// Check to see if there's any children, if there are we build another select box;
	if (node && node.children.length > 0) {
	this_select.after('<select><option value="">------</option></select');

	var next_select = this_select.next();
	next_select.addClass('drilldown-' + (node.depth + 1));
	next_select.data('depth', node.depth);

	$.each(node.children, function(){
	var opt = $('<option>');
	opt.val(this.value);
	opt.text(this.short_label);
	opt.data('node', this);
	next_select.append(opt);
	});

	next_select.change(change_handler);
	}
	}
	root_select.change(change_handler);
	});

	</script>


	</body>
	</html>