/* Création : juin 2008
	<!--
	when I was searching web for client side dependent list boxes, I got 
	some scripts. But some of them were very much fixed (fixed select name, option name etc.), some were vary complex. Then I 
	thought to make it myself.I use jQuery as the standard JavaScript library for most of my web project. It makes javascript coading
	 a fun. So I used Jquery here. Now it's working fine.

	Here is simply how to do this.

	1. Include Jqury.js.
	2. Write this simple function
	-------
	function makeSublist(parent,child)
		{
			$('#'+parent).change(
				function()
				{
					var parentValue = $('#'+parent).attr('value');
					$('#'+child+" option").hide();
					$('#'+child+" .sub_"+parentValue).show();
					var option = $('#'+child+" .sub_"+parentValue);
					option[0].selected="selected";
				}
			);
		}
	-------   
	3. Add a class to '<option>'s of child list box.
	   The class name will be the value of it's parent '<option>' in parent listbox.   

	Exemple :
		<form>
			<select id="parent">
				<option value="1">Flower</option>
				<option value="2">Animal</option>
			</select>
			
			<select id="child">
				<option class="sub_1" value="1">Rose</option>
				<option class="sub_1" value="2">Sunflower</option>
				<option class="sub_1" value="3">Orchid</option>
				
				<option class="sub_2" value="4">Cow</option>
				<option class="sub_2" value="5">Dog</option>
				<option class="sub_2" value="6">Cat</option>
				<option class="sub_2" value="7">Tiger</option>
			</select>

			<select id="grandsun">
				<option class="sub_1" value="1">Rose type 1</option>
				<option class="sub_1" value="2">Rose type 2</option>
				<option class="sub_1" value="3">Rose type 3</option>
				
				<option class="sub_2" value="4">Sunflower type 1</option>
				<option class="sub_2" value="5">Sunflower type 2</option>
				
				<option class="sub_3" value="6">Orchid type 1</option>
				<option class="sub_3" value="7">Orchid type 2</option>
				
				<option class="sub_4" value="8">Cow type 1</option>
				<option class="sub_4" value="9">Cow type 2</option>
				
				<option class="sub_5" value="10">Dog type 1</option>
				
				<option class="sub_6" value="11">Cat type 2</option>
				
				<option class="sub_7" value="12">Tiger type 2</option>
				<option class="sub_7" value="13">Tiger type 2</option>
				<option class="sub_7" value="14">Tiger type 3</option>		
			</select>

		</form>

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