Flex Examples

This is a semi-common problem. You have two (or more) ComboBox controls and you want the options in second combo box to change based on the selected item in the first combo box. Or in a real world case, you have a list of countries and a list of provinces/states/regions in that country. When the user changes the value in the country combo box to “Canada”, you would only want to display a list of Canadian provinces/territories in the second combo box. Although if the user selected USA in the country combo box, you would only want to show the American states/regions.

Anyways, enough jibber-jabber, lets see this in action.

Full code after the jump.

Download source (ZIP, 2K) | View MXML | View countries_states.xml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">

    <mx:XML id="dp" source="countries_states.xml" format="e4x" />

    <mx:Form>
        <mx:FormItem label="Country:">
            <mx:ComboBox id="countryCB" dataProvider="{dp.country}" labelField="@name" />
        </mx:FormItem>
        <mx:FormItem label="State:">
            <mx:ComboBox id="stateCB" dataProvider="{countryCB.selectedItem.state}" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

A reader asked how you could convert this to use three related CheckBox controls instead of two. The following example shows how you can create three related check boxes to show Country, State, and City:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/04/creating-two-related-comboboxes/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XML id="dp" source="countries_states_cities.xml" format="e4x" />

    <mx:Form>
        <mx:FormItem label="Country:">
            <mx:ComboBox id="countryCB"
                    dataProvider="{dp.country}"
                    labelField="@name" />
        </mx:FormItem>
        <mx:FormItem label="State:">
            <mx:ComboBox id="stateCB"
                    dataProvider="{countryCB.selectedItem.state}"
                    labelField="@name" />
        </mx:FormItem>
        <mx:FormItem label="City:">
            <mx:ComboBox id="cityCB"
                    dataProvider="{stateCB.selectedItem.city}"
                    labelField="@name" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

I also modified the XML format slightly from the previous example to make it work with multiple levels:

countries_states_cities.xml

<?xml version="1.0" encoding="utf-8"?>
<countries>
    <country name="Canada">
        <state code="AB" name="Alberta">
            <city name="Calgary" />
            <city name="Edmonton" />
        </state>
        <state code="BC" name="British Columbia">
            <city name="Nanaimo" />
            <city name="Vancouver" />
            <city name="Victoria" />
        </state>
        <state code="ON" name="Ontario">
            <city name="Ottawa" />
            <city name="Toronto" />
        </state>
        <state code="QC" name="Quebec">
            <city name="Montreal" />
        </state>
        <state code="SK" name="Saskatchewan">
            <city name="Moosejaw" />
        </state>
    </country>

    <country name="United States of America">
        <state code="AZ" name="Arizona">
            <city name="Phoenix" />
        </state>
        <state code="CA" name="California">
            <city name="Oakland" />
            <city name="Los Angeles" />
            <city name="Sacramento" />
        </state>
        <state code="CO" name="Colorado">
            <city name="Denver" />
        </state>
        <state code="DC" name="District of Columbia">
            <city name="Washington" />
        </state>
        <state code="FL" name="Florida">
            <city name="Miami" />
            <city name="Orlando" />
        </state>
        <state code="GA" name="Georgia">
            <city name="Atlanta" />
        </state>
        <state code="IL" name="Illinois">
            <city name="Chicago" />
        </state>
        <state code="IN" name="Indiana">
            <city name="Indianapolis" />
        </state>
        <state code="LA" name="Louisiana">
            <city name="New Orleans" />
        </state>
        <state code="MA" name="Massachusetts">
            <city name="Boston" />
        </state>
        <state code="MI" name="Michigan">
            <city name="Detroit" />
        </state>
        <state code="MN" name="Minnesota">
            <city name="Minneapolis" />
        </state>
        <state code="NC" name="North Carolina">
            <city name="Charlotte" />
        </state>
        <state code="NJ" name="New Jersey">
            <city name="East Rutherford" />
        </state>
        <state code="NY" name="New York">
            <city name="New York" />
        </state>
        <state code="OH" name="Ohio">
            <city name="Cleveland" />
        </state>
        <state code="OR" name="Oregon">
            <city name="Portland" />
        </state>
        <state code="PA" name="Pennsylvania">
            <city name="Philadelphia" />
        </state>
        <state code="TN" name="Tennessee">
            <city name="Memphis" />
        </state>
        <state code="TX" name="Texas">
            <city name="Dallas" />
            <city name="Houston" />
            <city name="San Antonio" />
        </state>
        <state code="UT" name="Utah">
            <city name="Salt Lake City" />
        </state>
        <state code="WA" name="Washington">
            <city name="Seattle" />
        </state>
        <state code="WI" name="Wisconsin">
            <city name="Milwaukee" />
        </state>
    </country>
</countries>

View source is enabled in the following example.