2011-07-06 5 views
1

ユーザーが最初のドロップダウンボックスからカテゴリを選択すると、最初のドロップダウンの選択に基づいて2番目のドロップダウンを更新します。リストのコンテンツをFlexの別のリストの選択に依存させる方法は?

私はインスタンスの名前を最初のドロップダウンの「データ」の値に設定されている複数のArrayCollections、作成した:

[Bindable] 
public var countries:ArrayCollection = new ArrayCollection([ 
       {label:"USA",data:"USA"}, 
       {label:"Canada",data:"Canada"}, ]); 

[Bindable] 
public var USA:ArrayCollection = new ArrayCollection([ 
       {label:"state1",data:"state1"}, 
       {label:"state2",data:"state2"}, 
       {label:"state3",data:"state3"}, ]); 

[Bindable] 
public var Canada:ArrayCollection = new ArrayCollection([ 
       {label:"statea",data:"statea"}, 
       {label:"state2b",data:"stateb"}, 
       {label:"statec",data:"statec"}, ]); 

[Bindable] 
public var Italy:ArrayCollection = new ArrayCollection([ 
       {label:"statex",data:"statex"}, 
       {label:"statey",data:"statey"}, 
       {label:"statez",data:"statez"}, ]); 

を、リストは次のように実装されています。

<mx:FormItem label="State:" color="black" required="true"> 
<s:DropDownList id="state" prompt="Select State" dataProvider="{country.selectedItem.data}"> 
</s:DropDownList> 
</mx:FormItem> 

どれでもどのようにこれを達成するためのアイデア?基本的には、正しいarraycollectionを使うためにリストのdataproviderを正しく更新する方法を知る必要があります。

+0

あなたが最初のコンボボックスのコードを示すことができました(それはデータプロバイダです)? –

+0

最初のコンボボックス:は、 \t \t \t \t \t \t \t \t \t \t \t \t \t \t Cninroh

+0

編集してください、あなたの元余分なコードで質問... –

答えて

1

最初のドロップダウン・リストの変更イベントを聞いて、このような何かを:

state.dataProvider = this[country.selectedItem.data] 

「この」キーワードは、現在のコンポーネントを参照し、ブラケットの構文を使用するには、文字列値を使用します。状態dataProviderを使用してコンポーネントの変数にアクセスします。

2

あなたが代わりにもっとこのように、入れ子にするためにあなたのデータを変更することができます:あなたが持っているよう

[Bindable] 
    public var countries:ArrayCollection = new ArrayCollection([ 
      {label:"USA", data:    // country 
       new ArrayCollection([  // its states, nested 
        {label:"state1",data:"state1"}, 
        {label:"state2",data:"state2"}, 
        {label:"state3",data:"state3"} 
       ]) 
      }, 
      {label:"Canada",data:   // country 
       new ArrayCollection([  // its states, nested 
        {label:"state1",data:"state1"}, 
        {label:"state2",data:"state2"}, 
        {label:"state3",data:"state3"} 
       ])    
      } 
      ]); 

それからちょうど選択した項目をバインド:

<mx:FormItem label="State:" color="black" required="true"> 
    <s:DropDownList id="state" prompt="Select State" 
     dataProvider="{country.selectedItem.data}"> 
    </s:DropDownList> 
</mx:FormItem> 
関連する問題