04
Aug
07

Creating two related ComboBoxes

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.


11 Responses to “Creating two related ComboBoxes”


  1. 1 Prashant Aug 18th, 2007 at 4:23 am

    Hi,

    Very simple and very use full example

    Thanks
    Prashant

  2. 2 Márcio Gomes Sep 14th, 2007 at 6:19 am

    Thanks. The example is very good.

  3. 3 mas Oct 4th, 2007 at 8:49 pm

    Hi great examples. I was wondering how that wouuld work pulling the data from a database

    I have this but it only pulls one name:

    Also How do I display a label field and pull values from another field. Ex display dept name but the key is from deptID

    Thanks

  4. 4 gvb May 12th, 2008 at 7:24 am

    how about with 3 variables? like country , state and city?

    thank you

  5. 5 peterd May 12th, 2008 at 10:03 am

    gvb,

    Good question. I updated the entry above with a new example showing linked Country/State/City ComboBox controls.

    Peter

  6. 6 Noor Jun 1st, 2008 at 12:29 am

    This is a very good Example,

    Could you help me,

    I want same Example but with VB , please?
    :)

  7. 7 peterd Jun 1st, 2008 at 12:36 am

    Noor,

    I don’t know VB, sorry.

    Peter

  8. 8 Pierre Jun 4th, 2008 at 3:14 am

    Hello,

    Very interesting examples.

    In the first example, i try to have the name of the state selected, i do :
    <mx:Text text=”{stateCB.selectedItem}”/>

    My question is how to have the “code” of the state selected.

    Thanks.

  9. 9 Bernard Jul 24th, 2008 at 11:27 am

    Nice example.

    My problem is a bit different. I’m using the Adobe AutoComplete ComboBox to filter through a long list of names, so if I type “Sm” the box will pre-populate with Smecker, Smib, Smith, Smith and Smith. Is there any way to show the 2nd filtering element within the same combo box? In other words, to filter by TWO labelFields at the same time, so my results would read:

    Smecker, Joe
    Smib, Bob
    Smith, Al
    Smith, Jack
    Smith, Peter

    Thanks!

  10. 10 Bernard Jul 24th, 2008 at 11:35 am

    Never mind - all you have to do is set the labelFunction property like so:

    Dang, that was easy!

  11. 11 Greg Schmidt Jul 25th, 2008 at 11:23 am

    VERY cool and simple example… Nice work man!

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".