如何使列表内容依赖于 Flex 中另一个列表中的选择？

发布于 2024-11-18 19:30:57 字数 1268 浏览 4 评论 0原文

当用户从第一个下拉框中选择一个类别时，我希望根据第一个下拉列表的选择来更新第二个下拉列表。

我创建了多个 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>

有什么想法如何实现这一点吗？基本上我需要知道如何正确更新列表的数据提供程序以使用正确的数组集合。

原文

When a user selects a category from the first drop down box then i want the 2nd drop down to be updated based on the selection of the first drop down.

I have created multiple ArrayCollections whose names are set to the "data" values of the first drop down, for instance:

[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"}, ]);

and the list is implemented as :

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

Any ideas how to achieve this? Basically I need to know how to correctly update dataprovider for the list to use correct arraycollection.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

落花浅忆 2024-11-25 19:30:57

您可以改为将数据更改为嵌套，更像这样：

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

You could instead change your data to be nested, more like this :

    [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"} 
                ])            
            }
            ]);

Then just bind the selected item like you have :

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

回复收藏 0 原文

但可醉心 2024-11-25 19:30:57

监听第一个下拉列表的change事件并执行如下操作：

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

'this'关键字引用当前组件，使用括号语法将使用状态dataProvider中的字符串值来访问组件上的变量。

Listen to the change event of the first drop down list and do something like this:

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

The 'this' keyword refers to the current component, and using the bracket syntax will use the string value in the state dataProvider to access the variable on the component.

回复收藏 0 原文

~没有更多了~