Skip to content

Instantly share code, notes, and snippets.

@suntong

suntong/CascadedSelections.html

Created September 5, 2015 13:50
Show Gist options
  • Save suntong/51846145aee540f8f891 to your computer and use it in GitHub Desktop.
Save suntong/51846145aee540f8f891 to your computer and use it in GitHub Desktop.
Download ZIP
Cascading Select boxes
Raw
CascadedSelections.html
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" defer="defer">
function cascadeSelect(parent, child){
var childOptions = child.find('option:not(.static)');
child.data('options',childOptions);
parent.change(function(){
childOptions.remove();
child
.append(child.data('options').filter('.sub_' + this.value))
.change();
})
childOptions.not('.static, .sub_' + parent.val()).remove();
}
$(function(){
cascadeForm = $('.cascadeTest');
orgSelect = cascadeForm.find('.orgSelect');
terrSelect = cascadeForm.find('.terrSelect');
locSelect = cascadeForm.find('.locSelect');
cascadeSelect(orgSelect, terrSelect);
cascadeSelect(terrSelect, locSelect);
});
</script>
</head>
<body>
<form action="#" class="cascadeTest">
<table>
<tr>
<th>Organization:</th>
<td>
<select name="orgSelect" class="orgSelect">
<option value="0">Select an Organization</option>
<option value="1">Organization 1</option>
<option value="2">Organization 2</option>
<option value="3">Organization 3</option>
</select>
</td>
</tr>
<tr>
<th>Territory:</th>
<td>
<select name="terrSelect" class="terrSelect">
<option value="0" class="static">- All Territories -</option>
<option value="1" class="sub_1">Organization 1 - Territory 1</option>
<option value="2" class="sub_1">Organization 1 - Territory 2</option>
<option value="3" class="sub_2">Organization 2 - Territory 1</option>
<option value="4" class="sub_2">Organization 2 - Territory 2</option>
<option value="5" class="sub_3">Organization 3 - Territory 1</option>
<option value="6" class="sub_3">Organization 3 - Territory 2</option>
<option value="7" class="sub_3">Organization 3 - Territory 3</option>
</select>
</td>
</tr>
<tr>
<th>Location:</th>
<td>
<select name="locSelect" class="locSelect">
<option value="0" class="static">- All Locations -</option>
<option value="1" class="sub_1">Organization 1 - Territory 1 - Location 1</option>
<option value="1" class="sub_1">Organization 1 - Territory 1 - Location 2</option>
<option value="2" class="sub_2">Organization 1 - Territory 2 - Location 1</option>
<option value="2" class="sub_2">Organization 1 - Territory 2 - Location 2</option>
<option value="3" class="sub_3">Organization 2 - Territory 1 - Location 1</option>
<option value="3" class="sub_3">Organization 2 - Territory 1 - Location 2</option>
<option value="4" class="sub_4">Organization 2 - Territory 2 - Location 1</option>
<option value="5" class="sub_5">Organization 3 - Territory 1 - Location 1</option>
<option value="6" class="sub_6">Organization 3 - Territory 2 - Location 1</option>
<option value="7" class="sub_7">Organization 3 - Territory 3 - Location 1</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
@suntong
Copy link
Author

suntong commented Sep 7, 2015

http://plnkr.co/edit/DOqW9FJQYMhd5RemRy1F?p=preview

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment