Creating three related Spark DropDownList controls in Flex 4

In a previous example, “Creating two related ComboBoxes”, we saw how you could create two or three related MX ComboBox controls in Flex 3 by binding to the previous ComboBox control’s selected item.

The following example shows how you can create three related Spark DropDownList controls in Flex 4 by using databinding and XML.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?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>

[GoogleAdsWide]

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

8 thoughts on “Creating three related Spark DropDownList controls in Flex 4

  1. I tried this example and my selectedItem value keeps populating as ARRAY. What am I doing wrong?

  2. Peter,

    Your examples are great!

    Can you think of a way that this might be accomplished with2 (or 3) ArrayLists rather than a single XML file?

    thanks,

    Mark

  3. Peter,
    Thanks for this! I was wondering, would it be possible to have all DDL update after a change. I.e. after selecting a country in DDL-1, the DDL-2 would show all the states/provinces of this country and the DDL-3 would show all the cities of this country thus allowing the user to pick the city right away. Then if a user wants to refine the search, a selection can be made on the DDL-2 which would reduce the list of city presented in DDL-3?

  4. Nice example. Could you helpme?
    I’m trying to connect my dropdown to a service but can’t get it working:

    //on creationComplete I’m calling: regionSrv.send();

    XML
    =====

Comments are closed.