triple drop down ajax

Hi Bob. Is there a way how to do triple ajax drop down menu? I am not good in ajax and I am trying my best to accomplish it by practice but somehow I am not successful. I tried to reuse your code for the javascript code for double drop down to create a triple drop down but somehow I don't know how to do it in the ajax event. A little help please.... Thanks in advance. Below is my code trying to accomplish this:
[attachment=0]Screen Shot 2012-03-16 at 12.33.47 AM.png[/attachment]
html:

<div class="formfield"  id="autoID-c42996e07c647ca20b0ce7a57d6a0827_container_div">
<label>District Name:</label>
<?php
$db =& JFactory::getDBO();
$query = "
SELECT DISTINCT `DistrictCode`, `DistrictName`
FROM `#__district`
ORDER BY `DistrictName`;
";
$db->setQuery($query);
$data = $db->loadObjectList();
?>
<select size="1" id="district" class=" validate['required']" title="" name="district">
<option value="">District is required.</option>
<option value="" selected="selected">Select District</option>
<?php
foreach($data as $d) {
echo " <option value='".$d->DistrictName."'>".$d->DistrictName."</option>";
}
?>
</select>
<div class="clear"></div>
<div id="error-message-district"></div>
</div>
 <div class="formfield" id="autoID-08ade1b79ac61a2f2638fa1a36843215_container_div">
<label>School Name:</label>

<span id="ajax_getschool">Please choose District</span> 
<span id="progress_getschool" style="visibility: hidden;">Searching...</span> 
<div class="clear"></div>
<div id="error-message-school"></div>
</div>
<div>
<span id="ajax_getproject"><label>Project Name:</label></span> 
<span id="ajax_getproject"><label>Please select School</label></span> 
<span id="progress_getproject" style="visibility: hidden;">Searching...</span> 
<div class="clear"></div>
<div id="error-message-project"></div>
</div>

my JS code:

window.addEvent('domready', function() {

$('district').addEvent('change', function () {
// edit these two lines to match your form
var message = "Please select a District";
var a = $('district').value;
if ( a != null && a != '' ) {
getSchool(a);
} else {
$('ajax_getschool').setHTML("<span id='ajax_getschool' >"+message+"</span>")
}
}) ;
<?php if(isset($form->data['district'])){ ?>
$('district').set('value', '<?php echo $form->data['district']; ?>');
$('district').fireEvent('change');
<?php } ?>
});


function getSchool(a){
var form_name = "principal_project-Copy";
var url =
"index.php?option=com_chronoforms&chronoform="+form_name+"&event=ajax&format=raw";
new Request.HTML({
url: url,
method: 'post',
onRequest: function(){
$('progress_getschool').setStyle('visibility', 'visible');
},
onComplete: function(){
$('progress_getschool').setStyle('visibility', 'hidden');
<?php if(isset($form->data['SchoolName'])){ ?>
$('SchoolName').set('value', '<?php echo $form->data['SchoolName']; ?>');
<?php } ?>
},
update: $('ajax_getschool'),
data: { 'sid': a }
}).send();
};

window.addEvent('domready', function() {

$('SchoolName').addEvent('change', function () {
// edit these two lines to match your form
var message = "Please select a Project";
var b = $('SchoolName').value;
if ( b != null && b != '' ) {
getProject(b);
} else {
$('ajax_getproject').setHTML("<span id='ajax_getproject' >"+message+"</span>")
}
}) ;
<?php if(isset($form->data['SchoolName'])){ ?>
$('SchoolName').set('value', '<?php echo $form->data['SchoolName']; ?>');
$('SchoolName').fireEvent('change');
<?php } ?>
});


function getProject(b){
var form_name = "credit_card";
var url =
"index.php?option=com_chronoforms&chronoform="+form_name+"&event=ajax&format=raw";
new Request.HTML({
url: url,
method: 'post',
onRequest: function(){
$('progress_getschool').setStyle('visibility', 'visible');
},
onComplete: function(){
$('progress_getproject').setStyle('visibility', 'hidden');
<?php if(isset($form->data['project_name'])){ ?>
$('project_name').set('value', '<?php echo $form->data['project_name']; ?>');
<?php } ?>
},
update: $('ajax_getproject'),
data: { 'sid': b }
}).send();
};

my ajax event:

<?php
$district =& JRequest::getString('sid', '', 'post');
if ( $district ) {
  $db =& JFactory::getDBO();
  $query = "
    SELECT DISTINCT `SchoolName` AS `id`,`SchoolName`, `SchoolAddress`, `SchoolCity`, `SchoolState`,`SchoolZip`
      FROM `#__school`
      WHERE `DistrictName` = '$district'
      ORDER BY `SchoolName`;
  ";
  $db->setQuery($query);
  $data = $db->loadObjectList();
  if ( count($data) ) {
    $m = new stdClass();
    $m->id = 0;
    $m->SchoolName = 'Select School';
    $data = array_merge(array($m), $data);
    $return = JHTML::_('select.genericlist', $data, 'SchoolName',
'class="inputbox required select" size="1" ', 'id', 'SchoolName', 0);
	$SchoolName =& JRequest::getString('sid', '', 'post');
	if ( $SchoolName ) {
  $db =& JFactory::getDBO();
  $query = "
    SELECT DISTINCT `project_name` AS `id`,`project_name`, `project_code`, `project_description`, `project_cost`
      FROM `#__chronoforms_data_principal_project` 
        WHERE `SchoolName` = '{$SchoolName}' && `project_name` = '{$project_name}'
		ORDER BY `project_name`  ";
  $db->setQuery($query);
  $data = $db->loadObjectList();
  if ( count($data) ) {
    $m = new stdClass();
    $m->id = 0;
    $m->project_name = 'Select Project';
    $data = array_merge(array($m), $data);
    $return = JHTML::_('select.genericlist', $data, 'project_name',
'class="inputbox required select" size="1" ', 'id', 'project_name', 0);

  } else {
    $return = "Sorry, we couldn't find that project";
  }
} else {
  $return = "Sorry, we couldn't find a project id";
}
echo $return;
  } else {
    $return = "Sorry, we couldn't find that District";
  }
} else {
  $return = "Sorry, we couldn't find a district id";
}
echo $return;
$mainframe->close();
?>

Please help. Any idea how to do the triple drop down in AJAX?