用ext读取XML写一个“省-市-邮编”三级联动-优快云博客

本文链接：https://blog.youkuaiyun.com/ruanzy888888/article/details/83842977

本文介绍使用ExtJS实现省市联动功能的方法。通过Ajax获取XML数据，并利用ExtJS的ComboBox组件展示省市区信息。首先创建存储省份数据的SimpleStore，然后根据所选省份加载对应城市的ComboBox。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<link type="text/css" rel="stylesheet"
			href="js/ext/resources/css/ext-all.css" />
		<script type="text/javascript" src="js/ext/ext-base.js"></script>
		<script type="text/javascript" src="js/ext/ext-all.js"></script>
		<script type="text/javascript">
			Ext.onReady(function () {
				var provinceArr = [];
				var cityMap = new Ext.util.MixedCollection();
				var zipMap = new Ext.util.MixedCollection();
				var conn = Ext.lib.Ajax.getConnectionObject().conn; 
				conn.open("GET", 'data.xml',false); 
				conn.send(null); 
				var xmlDoc = conn.responseXML;
				var provinces = xmlDoc.getElementsByTagName('province');
				var len1 = provinces.length;
				for(var i = 0; i<len1; i++){
					var province = provinces[i].getAttribute('name');
					provinceArr.push([province,province]);
					var cities = provinces[i].getElementsByTagName('city');
					var len2 = cities.length;
					var cityArr  = [];
					for(var k = 0; k<len2; k++){
						var city = cities[k].getAttribute('name');
						var addr = cities[k].getElementsByTagName('address')[0].childNodes[0].nodeValue;
						cityArr.push([city,city]);
						zipMap.add(city,addr);
					}
					cityMap.add(province,cityArr);
				}
				var pStore = new Ext.data.SimpleStore({fields:['name','value'],data:provinceArr});
				var cStore = new Ext.data.SimpleStore({fields:['name','value']});
				var provinceCombo = new Ext.form.ComboBox({
			    	renderTo:'p',
			    	store:pStore,
			    	mode:'local',
			    	displayField:'name',
			    	valueField:'value',
			    	triggerAction:'all',
			    	listeners:{'select':function(combo){
			    		var val = combo.getValue();
			    		cityCombo.clearValue();
			    		zipTxt.setValue('');
			    		cStore.loadData(cityMap.get(val));
			    	}}
			    });
			   var cityCombo = new Ext.form.ComboBox({
			    	renderTo:'c',
			    	store:cStore,
			    	mode:'local',
			    	displayField:'name',
			    	valueField:'value',
			    	triggerAction:'all',
			    	listeners:{'select':function(combo){
			    		var val = combo.getValue();
			    		zipTxt.setValue(zipMap.get(val));
			    	}}
			    });
			    var zipTxt = new Ext.form.TextField({
			    	renderTo:'a'
			    });
			});
		</script>
	</head>
	<body>
		<table>
			<tr>
				<td id="p"></td>
				<td id="c"></td>
				<td id="a"></td>
			</tr>
		</table>
	</body>
</html>