3 dynamically linked menu from mysql

I had a friend programming something for me but hes now stuck with the next stage...could someone help please....

Basically i have a mysql db and i want to fill three drop down box dnamically so that when first box is select(options have been pulled from mysql db) the scond drop down is filled with the correct data and when an option is picked from that box another dropdown is filled and when that is selected a value shows in another field. www.dzined.co.uk/insurance for exaple is what i have with two dropdons being filled.

function Selector(sel, sub, premium, premiumSpan)
{
	var self = this;
	this.sel = sel;
	this.sub = sub;
	this.premiumInput = premium;
	/**
	 * Block element that shows the premium value to the user
	 */
	this.premiumSpan = premiumSpan;
	
	/**
	 * Loop through all sub-selects
	 */
	for (var i = 0, subSelect; subSelect = sub[i]; i++) {
		/**
		 * Loop through all options of the sub-select
		 */
		for (var j = 0, subOption; subOption = subSelect.options[j]; j++) {
			/**
			 * Attach premium value to the option itself
			 */
			subOption.premiumValue = window.data[i][j];
		}
		/**
		 * Add onchange event for the sub-select
		 */
		subSelect.onchange = function () {
			self.subSelectChange(this);
		};
	}
	
	this.setSelectedSub(this.sub[this.sel.selectedIndex]);
	
	this.sel.onchange = function () {
		self.selectChange(this);
	}
}
Selector.prototype = {
	show : function (o) {
		o.style.display = "block";
		o.disabled = false;
	},
	hide : function (o) {
		o.style.display = "none";
		o.disabled = true;
	},
	setPremiumValue : function () {
		var value = this.lastSelected.options[this.lastSelected.selectedIndex].premiumValue;
		this.premiumInput.value = value;
		this.premiumSpan.innerHTML = value;
		delete value;
	},
	/**
	 * Sets a new visible subselect
	 */
	setSelectedSub : function (select) {
		if (this.lastSelected) {
			this.hide(this.lastSelected);
		}
		this.lastSelected = select;
		this.show(select);
		this.setPremiumValue();
	},
	/**
	 * Called when the parent select is modified
	 */
	selectChange : function (select) {
		this.hide(this.lastSelected);
		this.lastSelected = this.sub[select.selectedIndex];
		this.show(this.lastSelected);
		this.subSelectChange();
	},
	/**
	 * Called when the sub-select is modified
	 */
	subSelectChange : function () {
		this.setPremiumValue();
	}
};
window.onload = function () {
	new Selector(document.getElementById("mainSelect"),
		document.getElementById("sub").getElementsByTagName("select"),
		document.getElementById("premiumInput"),
		document.getElementById("premiumSpan")
	);
};
window.onunload = function () {
	window.onload = null;
	window.onunload = null;
}

Code (markup):

PHP Code ------------------------------

$PRODUCT_ID = 1;
error_reporting(2047);
require_once 'mysql.php';
?>
<script type="text/javascript">
<?php echo $jsData; ?>
</script>
<script type="text/javascript" src="script.js"></script>
<style type="text/css">
#sub select {
display:none;
}
</style>
<?php /* end */ ?>

<form id="product_form" action="form.php" method="post">

<input type="hidden" name="<?php echo $superCol; ?>" value="<?php echo $postedSuperCol; ?>">
<h3>Level of Cover</h3>
<?php echo $mainSelect ?>
<div id="sub">
<h3>Period of Cover</h3>
<?php echo $subSelects ?>
</div>
<h3>Premium for Cover</h3>
<input type="hidden" id="premiumInput" name="premium" value="<?php echo $postedBottomCol ?>">
<span id="premiumSpan"><?php echo $postedBottomCol ?></span>
<input type="submit" value="Submit">
</form>
<?php include("footer.php") ?>