Creating three related Spark DropDownList controls in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/28/creating-three-related-spark-dropdownlist-controls-in-flex-4/ -->
<s:Application name="Spark_DropDownList_related_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Declarations>
        <s:XMLListCollection id="dp">
            <fx:XMLList xmlns="">
                <country label="USA">
                    <state label="Alaska" city="AK">
                        <city label="Anchorage" />
                        <city label="Fairbanks" />
                        <city label="Juneau" />
                    </state>
                    <state label="California" abbr="CA">
                        <city label="San Francisco" />
                        <city label="Oakland" />
                        <city label="Los Angeles" />
                        <city label="Palm Springs" />
                        <city label="Sacramento" />
                    </state>
                    <state label="Nevada" abbr="NV">
                        <city label="Las Vegas" />
                        <city label="Reno" />
                        <city label="Carson City" />
                    </state>
                </country>
                <country label="Canada">
                    <province label="British Columbia"  abbr="BC">
                        <city label="Vancouver" />
                        <city label="Victoria" />
                    </province>
                    <province label="Alberta" abbr="AB">
                        <city label="Calgary" />
                        <city label="Edmonton" />
                    </province>
                </country>
            </fx:XMLList>
        </s:XMLListCollection>
    </fx:Declarations>
 
    <mx:Form horizontalCenter="0" top="20">
        <mx:FormItem label="Country:">
            <s:DropDownList id="countryDDL"
                    dataProvider="{dp}"
                    labelField="@label"
                    requireSelection="true" />
        </mx:FormItem>
        <mx:FormItem label="State:" required="true">
            <s:DropDownList id="stateDDL"
                    dataProvider="{new XMLListCollection(countryDDL.selectedItem.children())}"
                    labelField="@label"
                    requireSelection="false" />
        </mx:FormItem>
        <mx:FormItem label="City:" required="true">
            <s:DropDownList id="cityDDL"
                    dataProvider="{new XMLListCollection(stateDDL.selectedItem.children())}"
                    labelField="@label"
                    requireSelection="false" />
        </mx:FormItem>
    </mx:Form>
 
</s:Application>