dependent drop down list

Hi,
when a user selects a category from the first drop down box then i want the 2nd drop down to be updated based on the selection of the first drop down.  The code below works well but the only problem is that - all the categories are hard coded and i have hundreds of categories in which i cannot manually put all these categories in the code.  So is there a way to automate this without me hard coding all these categories?  thanks

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   viewSourceURL="srcview/index.html">
	
	<fx:Script>
		<![CDATA[
			import spark.events.IndexChangeEvent;
			import mx.collections.ArrayCollection;
			
			[Bindable]
			public var depts:ArrayCollection = new ArrayCollection([
				{label:"Electronics", data:1}, 
				{label:"Home Goods", data:2},
				{label:"Toys", data:3} ]);
			
			[Bindable]
			public var elecItems:ArrayCollection = new ArrayCollection([
				{label:"Samsung 25in TV", data:299}, 
				{label:"Panasonic Plasma", data:999}, 
				{label:"Sony LCD", data:899} ]);
			
			[Bindable]
			public var homeItems:ArrayCollection = new ArrayCollection([
				{label:"Blendtec Blender", data:399}, 
				{label:"Hoover Vaccuum", data:599}, 
				{label:"Black & Decker Toaster", data:99} ]);
			
			[Bindable]
			public var toyItems:ArrayCollection = new ArrayCollection([
				{label:"Nintendo DS", data:120}, 
				{label:"Lego's Star Wars Set", data:50}, 
				{label:"Leapfrog Leapster", data:30} ]);
			
			private function handleDepartmentSelected(event:IndexChangeEvent):void
			{
				list2.prompt="Select Item";
				list2.selectedIndex=-1; // reset so prompt shows
				if (list1.selectedIndex==0)
					list2.dataProvider=elecItems;
				else if (list1.selectedIndex==1)
					list2.dataProvider=homeItems;
				else if (list1.selectedIndex==2)
					list2.dataProvider=toyItems;
				
			}
			
		]]>
	</fx:Script>
	
	<!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
	source tabs for each sample.    -->
	<s:Panel title="DropDownList Sample" 
			 width="100%" height="100%" 
			 skinClass="skins.TDFPanelSkin">
		<s:VGroup width="100%" height="100%" left="120" top="5">
			<s:Label text="RJ's Warehouse Price Checker" fontSize="18" color="0x014f9f"/>
			<s:DropDownList id="list1" width="50%" dataProvider="{depts}" labelField="label" 
							prompt="Select Category"
							change="handleDepartmentSelected(event)"/>
			<s:Label id="text2"/>
			<s:DropDownList id="list2" width="50%" labelField="label" prompt="None"/>
			<mx:Spacer height="10"/>
			<s:Label fontSize="14" color="0x336699" text="The price of item: {list2.selectedItem.label} is: ${list1.selectedItem.data}" verticalAlign="bottom"/>
		</s:VGroup>
	</s:Panel>
	
</s:Application>

Select allOpen in new window