jQuery: making something recursive, but waiting until the dom updates

OK that’s kinda of vague.
What I am trying to do is make a set of inter related select-menus in a form. In another words depending on the value of the first SELECT, your OPTIONS are updated in the subsequent SELECT, automatically and w/o reloading the page.

I am using PHP and jQuery to do AJAX. My code seems to work but i have hit a bit of a conundrum. When I create some sort of loop within the function to make it recursive… it APPEARS the DOM is not updated, so the first set of of options works ok, but after that only NULL values are passed ( in other words the loops goes fine, but it sends the AJax functions NULL values, as if the first menu hadn’t been updated at all). Essentially, after the first time around the loop… valu=$(ops).val() reads “NULL”, apparently because the DOM has updated yet… I am not sure…

I tried to use a .trigger(“change”) instead of calling the function to create a loop but that didn’t seem to work any better.

right now, for example: if you change the Pages menu, the Areas menu will change correctly, all the others will change to NONE. but if you go back, and change the AREAS, the SEGMENT menu will update correctl… and all the following menus update to NONE.

so my question is, how can i fix the following code so that the function:

Is triggered by any SELECT menu change,
affects ONLY the menus BELOW the the trigger menu
affects ALL of the the menus BELLOW the the trigger menu
?

JS
function Strct(ops){
startAT=$(ops).attr(“id”);
nxt=$(ops).next().next();
table=$(nxt).attr(“id”);
valu=$(ops).val();
AJ(“table=”+table+“&start=”+startAT+“&where=”+valu, “#”+table+" option", “#”+table,“http://localhost/PHP LESSONS/LESSONS/NEWphp/CMS_UI/processStructure.php”);
if (($(nxt).next().next().attr(“id”))!=undefined){ Strct(nxt);}// checks that there is a next SELECT, loops function??
}

	$("#Structure select").change(function(){Strct(this);});


	function AJ(dat, reddot, reddot1, uri){
						$.ajax({
								url:uri,
								type:'POST',
								data:dat,
								success: function(result){
									$(reddot).remove();
									$(reddot1).append(result);
								}//success
						});//ajax

HTML
<form name=“Structure” id=“Structure” action=“page_CMS.php” method=‘POST’>
<fieldset>
<legend><span>Structure</span></legend>

				&lt;div id="edit"&gt;
						&lt;label for="edit"&gt;Action:&lt;/label&gt;
						&lt;input type='radio' name='act' value='add'checked&gt;&lt;span&gt; Add After &lt;/span&gt; &lt;input type='radio' name='act' value='delete'&gt;&lt;span&gt; Delete This &lt;/span&gt;					
				&lt;/div&gt;
				&lt;div&gt;&lt;label for="newNAME"&gt;Select Page: &lt;/label&gt;&lt;/div&gt;
				&lt;select name="Pages" id="Pages"&gt;
					&lt;?php
						$pages=getPages();
						BuildOptions($pages);
					?&gt;
				&lt;/select &gt;
				&lt;div&gt;&lt;label for="newNAME"&gt;Areas: &lt;/label&gt;&lt;/div&gt;
				&lt;select name="Areas" id="Areas"&gt;				
				&lt;/select &gt;
				&lt;div&gt;&lt;label for="newNAME"&gt;Segments: &lt;/label&gt;&lt;/div&gt;
				&lt;select name="Segements" id="Segments"&gt;
				&lt;/select &gt;
				&lt;div&gt;&lt;label for="newNAME"&gt;Columns: &lt;/label&gt;&lt;/div&gt;
				&lt;select name="Columns" id="Columns"&gt;
				&lt;/select &gt;
				&lt;div&gt;&lt;label for="newNAME"&gt;Blocks: &lt;/label&gt;&lt;/div&gt;
				&lt;select name="Blocks" id="Blocks"&gt;
				&lt;/select &gt;
				&lt;div class="submit"&gt;&lt;input type="submit" name="submit" value="Stucture"&gt;&lt;/div&gt;
		   &lt;/fieldset&gt;	
		&lt;/form&gt;

any help would be GREATLY APPRECIATED