/* Tie one select box to another in a child/parent relationship.  The 
   child should have all options loaded, and each child option tag 
   should have a class=".." attribute which should consist of the 
   string 'sub_' followed by the id of the option in the parent to 
   which it belongs, like so:

	<select name="..." id="parent">
		<option value="one">a</option>
		<option value="two">b</option>
		<option value="three">c</option>
	</select>

	<select name="..." id="child">
	  <option class="sub_one" value="...">...</option>
	  <option class="sub_one" value="...">...</option>
	  <option class="sub_one" value="...">...</option>
	  <option class="sub_two" value="...">...</option>
	  <option class="sub_two" value="...">...</option>
	  <option class="sub_two" value="...">...</option>
	  <option class="sub_two" value="...">...</option>
	  <option class="sub_two" value="...">...</option>
	  <option class="sub_three" value="...">...</option>
	</select>
	
	<script> $(document).ready(function() { makeSublist( 'parent', 'child', true, ''); }); </script>
*/

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');
  $('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
  
	try {
  childVal = (typeof childVal == "undefined")? "" : childVal ;
  $("#"+child+' option[value="'+ childVal +'"]').attr('selected','selected');
	} catch (e) {}
  
  $('#'+parent).change( 
  function()  {
  	var parentValue = $('#'+parent).attr('value');
  	$('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
  	if(isSubselectOptional) 
  		$('#'+child).prepend("<option value='none'> (None) </option>");

  	$('#'+child).val("none"); 
  	$('#'+child).trigger("change"); 
  	$('#'+child).focus();
  }
  );
 }