JSFiddle - React, Tailwind, and code Playground

by amirali roshanaei

HTML

<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"...

JavaScript

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);
		});