How to make list content dependant on selection in another list in Flex?

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.

I have created multiple ArrayCollections whose names are set to the "data" values of the first drop down, for instance:

[Bindable]
public var countries:ArrayCollection = new ArrayCollection([
                {label:"USA",data:"USA"}, 
                {label:"Canada",data:"Canada"},  ]);

[Bindable]
public var USA:ArrayCollection = new ArrayCollection([
                {label:"state1",data:"state1"}, 
                {label:"state2",data:"state2"}, 
                {label:"state3",data:"state3"}, ]);

[Bindable]
public var Canada:ArrayCollection = new ArrayCollection([
                {label:"statea"开发者_如何学Python,data:"statea"}, 
                {label:"state2b",data:"stateb"}, 
                {label:"statec",data:"statec"}, ]);

[Bindable]
public var Italy:ArrayCollection = new ArrayCollection([
                {label:"statex",data:"statex"}, 
                {label:"statey",data:"statey"}, 
                {label:"statez",data:"statez"}, ]);

and the list is implemented as :

<mx:FormItem label="State:" color="black" required="true">
<s:DropDownList id="state" prompt="Select State" dataProvider="{country.selectedItem.data}">
</s:DropDownList>
</mx:FormItem>

Any ideas how to achieve this? Basically I need to know how to correctly update dataprovider for the list to use correct arraycollection.

---

You could instead change your data to be nested, more like this :

    [Bindable]
    public var countries:ArrayCollection = new ArrayCollection([
            {label:"USA", data:             // country
                new ArrayCollection([       // its states, nested
                    {label:"state1",data:"state1"}, 
                    {label:"state2",data:"state2"}, 
                    {label:"state3",data:"state3"} 
                ])
            },
            {label:"Canada",data:           // country
                new ArrayCollection([       // its states, nested
                    {label:"state1",data:"state1"}, 
                    {label:"state2",data:"state2"}, 
                    {label:"state3",data:"state3"} 
                ])            
            }
            ]);

Then just bind the selected item like you have :

<mx:FormItem label="State:" color="black" required="true">
    <s:DropDownList id="state" prompt="Select State" 
        dataProvider="{country.selectedItem.data}">
    </s:DropDownList>
</mx:FormItem>

---

Listen to the change event of the first drop down list and do something like this:

state.dataProvider = this[country.selectedItem.data]

The 'this' keyword refers to the current component, and using the bracket syntax will use the string value in the state dataProvider to access the variable on the component.