Dependent ComboBox

Dependent ComboBox

Post by fizbea » Tue, 22 Jul 2008 13:44:42


You can do this by filtering the dataprovider for your secondary combobox. If
the dataprovider is an array you can use array.filter() and if it's an
arraycollection you can set array.filterFunction. Here's a really simple
example with two comboboxes, the first with states and the second with cities.



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.yqcomputer.com/ " layout="absolute"
initialize="init()">
<mx:VBox>
<mx:ComboBox id="statesCombo" dataProvider="{statesDP}"
change="filterCities()"/>
<mx:ComboBox id="citiesCombo" dataProvider="{citiesDP}"/>
</mx:VBox>

<mx:Script>
<![CDATA[

import mx.collections.ArrayCollection;

[Bindable] public var citiesDP:ArrayCollection;
[Bindable] public var statesDP:ArrayCollection;

public function init() : void {

statesDP = new ArrayCollection([
{label:"Alabama", data:"AL"},
{label:"California", data:"CA"},
{label:"Texas", data:"TX"}
]);
citiesDP = new ArrayCollection([
{label:"Mobile", state:"AL"},
{label:"Berkeley", state:"CA"},
{label:"San Diego", state:"CA"},
{label:"Palo Alto", state:"CA"},
{label:"Austin", state:"TX"}
]);
}

public function filterCities() : void {

citiesDP.filterFunction = filterFunction;
citiesDP.refresh();

}

public function filterFunction(item:Object):Boolean {

return (item.state == statesCombo.selectedItem.data);

}

]]>
</mx:Script>

</mx:Application>