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>