function makeSubList(parent, child, isSubselectOptional, childVal) {
	$("body").append("<select style='display:none' id='" + parent + child + "'></select>");
	$('#' + parent + child).html($("#" + child + " option"));

	var parentValue = $('#' + parent).attr('value');
	
	if (parentValue) {
		$('#' + child).html($("#" + parent + child + " .sub_" + parentValue).clone());
		if ($('#' + child + ' option:first').attr('value')) {
			$('#' + child).prepend("<option value=''> -- Select -- </option>");
		}
		$('#' + child).val(childVal);
	}
	else {
		$('#' + child).html($("#" + parent + child + " option").clone());
	}

	childVal = (typeof childVal == "undefined") ? "" : childVal;
	$("#" + child + ' option[value="' + childVal + '"]').attr('selected', 'selected');

	$('#' + parent).change( function() {
		var parentValue = $('#' + parent).attr('value');
		
		if (parentValue) {
			$('#' + child).html($("#" + parent + child + " .sub_" + parentValue).clone());
		}
		else {
			$('#' + child).html($("#" + parent + child + " option").clone());
		}
		if (isSubselectOptional) {
			if ($('#' + child + ' option:first').attr('value')) {
				$('#' + child).prepend("<option value=''> -- Select -- </option>");
			}
			$('#' + child).val('');
		}
		$('#' + child).trigger("change");
		$('#' + child).focus();
	});
}

$(function() {
	makeSubList('area1', 'area2', true, $('#area2').val());
});