Flex Dropdownlist 省市区 联调（XML数据源）

Flex Dropdownlist 省市区 联调（XML数据源）

标签（空格分隔）： Flex

---

最近做一个地图相关的项目，需要实现DropDownList的省市区选择，查了下资料，XML的数据也不算大，就准备全部在Flex中实现，不调用后台了。

XML数据：http://pan.baidu.com/s/1gdj92Wr

具体代码如下，代码中有注释：

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx"
         creationComplete="init_data(event)"
         width="100%" height="45">
    <fx:Script>
        <![CDATA[
            import mx.collections.XMLListCollection;
            import mx.events.FlexEvent;
            
            import spark.events.IndexChangeEvent;
            
            [Bindable]private var provinceList:XMLListCollection; //省数据提供源
            [Bindable]private var cityList:XMLListCollection; //市数据提供源
            [Bindable]private var districtList:XMLListCollection; //区&县 数据提供源
            
            
            /**
             * 初始化操作
             * 加载国家行政区域的XML
             */ 
            protected function init_data(event:FlexEvent):void
            {
                // TODO Auto-generated method stub
                if(!provinceList)
                    provinceList = new XMLListCollection();
                if(!cityList)
                    cityList = new XMLListCollection();
                if(!districtList)
                    districtList = new XMLListCollection();
                
                provinceList.source = region.province;
                
                droplist_province_changeHandler(null);//更新显示
            }
            /**
             * 选择省份
             */ 
            protected function droplist_province_changeHandler(event:IndexChangeEvent):void
            {
                // TODO Auto-generated method stub
                var x:XML = droplist_province.selectedItem as XML;
                //转换时由于联动关系，x值可能为空，此时用list的第一个数据填充
                if(x)
                    cityList.source = x.City;
                else{
                    droplist_province.selectedIndex=0;//首次加载，默认选中第一个
                    cityList.source = provinceList.source[0].City;
                }
                
                //如果没有相关的数据则隐藏该droplist
                if(cityList.length == 0)
                    droplist_city.visible = droplist_city.includeInLayout = false;
                else{
                    droplist_city.visible = droplist_city.includeInLayout = true;
                    droplist_city_changeHandler(null);
                }
            }
            
            /**
             * 选择 市
             */ 
            protected function droplist_city_changeHandler(event:IndexChangeEvent):void
            {
                // TODO Auto-generated method stub
                var x:XML = droplist_city.selectedItem as XML;
                //转换时由于联动关系，x值可能为空，此时用list的第一个数据填充
                if(x)
                    districtList.source = x.Piecearea;
                else{
                    droplist_city.selectedIndex=0;
                    districtList.source = cityList.source[0].Piecearea;
                }
                //如果没有相关的数据则隐藏该droplist
                if(districtList.length == 0)
                    droplist_district.visible = droplist_district.includeInLayout = false;
                else{
                    droplist_district.visible = droplist_district.includeInLayout = true;
                    droplist_district.selectedIndex=0;
                }
            }
            /**
             * 选择 县/区
             */ 
            protected function droplist_district_changeHandler(event:IndexChangeEvent):void
            {
                
            }
            
            //名字过长，截取显示
            private function shortName(x:XML):String
            {
                var name:String = x.@Name;
                return name.length > 13?name.substr(0,13)+"...":name; 
            }
            
        ]]>
    </fx:Script>
    <fx:Declarations>
        <fx:XML id="region" format="e4x" source="data/ChinaArea.xml"/>
    </fx:Declarations>
    <s:Rect x="0" y="0"
            radiusX="1" radiusY="1"
            height="100%" width="100%">
        
        <!--填充内容设计-->
        <s:fill>
            <s:LinearGradient>
                <s:entries>
                    <mx:GradientEntry color="#F6F6F6"/>
                </s:entries>
            </s:LinearGradient>
        </s:fill>
    </s:Rect> 
    <s:HGroup id="topleft" y="15" x="30" width="460" verticalAlign="middle">
        <s:Image x="10" y="10" width="20" height="20"/>
        <s:DropDownList id="droplist_province" x="60" y="10" 
                        dataProvider="{provinceList}" labelFunction="{shortName}"
                        change="droplist_province_changeHandler(event)">
        </s:DropDownList>
        <s:Label x="180" y="19" text="省" fontFamily="微软雅黑"/>
        <s:DropDownList id="droplist_city" x="212" y="10"
                        dataProvider="{cityList}" labelFunction="{shortName}"
                        change="droplist_city_changeHandler(event)">
        </s:DropDownList>
        <s:Label x="342" y="19" text="市" fontFamily="微软雅黑"/>
        <s:DropDownList id="droplist_district" x="374" y="10"
                        dataProvider="{districtList}" labelFunction="{shortName}"
                        change="droplist_district_changeHandler(event)">
        </s:DropDownList>
        <s:Label x="513" y="19" text="县/区" fontFamily="微软雅黑"/>
    </s:HGroup>
    <mx:VRule x="{topleft.x+topleft.width+10}" width="1" height="100%"/>
</s:Group>

转载于:https://www.cnblogs.com/DamianZhou/p/3953173.html