HI jQuery Experts,

I have a problem with hiding and unhiding the select boxes.

In the code below, by default the first select box is displayed. Selecting any option, will display the next select box, and so on.

I problem comes when I want it such that, if 4 select boxes are displayed and I change the first select box, i need to hide all select boxes after the second one, similarly if I change the second one, the fourth should be removed.


Pls take a look into the entire code:

Code:
  <script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.hidden{display: none;}
</style>
<table border=1>
	<tr>
		<td>
			<select id="aa" class="mySelect">
				<option>123</option>
				<option>456</option>
			</select>
			<div class="dv1">Test 1</div>
		</td>
	</tr>
	<tr>
		<td>
			<select id="bb" class="mySelect hidden">
				<option>123</option>
				<option>456</option>
			</select>
			<div class="dv2">Test 1</div>
		</td>
	</tr>
	<tr>
		<td>
			<select id="cc" class="mySelect hidden">
				<option>123</option>
				<option>456</option>
			</select>
			<div class="dv3">Test 1</div>
		</td>
	</tr>
	<tr>
		<td>
			<select id="dd" class="mySelect hidden">
				<option>123</option>
				<option>456</option>
			</select>
			<div class="dv4">Test 1</div>
		</td>
	</tr>

</table>

<script>
	$(document).ready(function(){
		
		$('.mySelect').change(function(){
			$(this).nextAll('select:first').removeClass('hidden');
		});


	});	
</script>