javascript实现【省市级联】

最新推荐文章于 2024-04-26 17:19:07 发布
甘蓝聊Java
最新推荐文章于 2024-04-26 17:19:07 发布
阅读量642
点赞数
文章标签： javascript 省市级联
本文链接：https://blog.csdn.net/u012383839/article/details/41747089
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>省市级联</title>
	<script type="text/javascript">
		function changeCity()
		{
			var province = document.myform.province.value;
			
			var cityList = new Array(34);
			
			//4个直辖市
			cityList['北京'] = ['北京'];
			cityList['上海'] = ['上海'];
			cityList['天津'] = ['天津'];
			cityList['重庆'] = ['重庆'];
			
			//2个特别行政区
			cityList['香港'] = ['香港'];
			cityList['澳门'] = ['澳门'];
			
			//5个自治区
			cityList['内蒙古'] = ['呼和浩特', '包头', '乌海', '赤峰', '通辽', '鄂尔多斯', '呼伦贝尔', '巴彦淖尔', '乌兰察布', '兴安', '锡林郭勒' ,'阿拉善'];
			cityList['新疆'] = ['乌鲁木齐', '克拉玛依', '吐鲁番', '哈密', '和田', '阿克苏', '喀什', '克孜勒苏柯尔克孜' ,'巴音郭楞蒙古', '昌吉', '博尔塔拉蒙古','伊犁哈萨克' ,'塔城','阿勒泰'];
			cityList['广西'] = ['南宁', '柳州', '桂林', '梧州', '北海', '防城港', '钦州', '贵港', '玉林', '百色', '贺州', '河池', '来宾', '崇左'];
			cityList['西藏'] = ['拉萨', '昌都', '山南', '日喀则', '那曲', '阿里', '林芝'];
			cityList['宁夏'] = ['银川', '石嘴山', '吴忠', '固原', '中卫'];
			
			//特别的
			cityList['台湾'] = ['台北', '高雄','基隆', '台中', '台南', '新竹', '嘉义'];
			
			//23个省
			cityList['河北'] = ['石家庄', '唐山', '秦皇岛', '邯郸', '邢台', '保定', '张家口', '承德', '沧州','廊坊', '衡水'];
			cityList['山西'] = ['太原', '大同', '阳泉', '长治', '晋城', '朔州', '晋中', '运城','忻州', '临汾', '吕梁'];
			cityList['辽宁'] = ['沈阳', '大连', '鞍山', '抚顺', '本溪', '丹东', '锦州', '营口', '阜新', '辽阳', '盘锦', '铁岭', '朝阳', '葫芦岛'];
			cityList['吉林'] = ['长春', '吉林', '四平', '辽源', '通化', '白山', '松原', '白城', '延边'];
			cityList['黑龙江'] = ['哈尔滨', '齐齐哈尔', '鸡西', '鹤岗', '双鸭山', '大庆', '伊春', '佳木斯', '七台河', '牡丹江', '黑河', '绥化', '大兴安岭'];
			cityList['江苏'] = ['南京', '无锡', '徐州', '常州', '苏州', '南通', '连云港', '淮安', '盐城', '扬州', '镇江', '泰州', '宿迁'];
			cityList['浙江'] = ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'];
			cityList['安徽'] = ['合肥', '芜湖', '蚌埠', '淮南', '马鞍山', '淮北', '铜陵', '安庆', '黄山', '滁州', '阜阳', '宿州', '巢湖', '六安', '亳州', '池州', '宣城'];
			cityList['福建'] = ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'];
			cityList['江西'] = ['南昌', '景德镇', '萍乡', '九江', '新余', '鹰潭', '赣州', '吉安', '宜春', '抚州', '上饶'];
			
			cityList['山东'] = ['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '威海', '济宁', '泰安', '日照', '莱芜', '临沂', '德州', '聊城', '滨州', '菏泽'];
			cityList['河南'] = ['郑州', '开封', '洛阳', '平顶山', '焦作', '鹤壁', '新乡', '安阳', '濮阳', '许昌', '漯河', '三门峡', '南阳', '商丘', '信阳', '周口', '驻马店'];
			cityList['河北'] = ['武汉', '黄石', '襄樊', '十堰', '荆州', '宜昌','荆门', '鄂州', '孝感', '黄冈', '咸宁', '随州','恩施'];
			cityList['湖南'] = ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界','益阳', '郴州','永州', '怀化', '娄底', '湘西'];
			cityList['广东'] = ['广州','深圳', '珠海', '汕头','韶关', '佛山', '江门','湛江', '茂名', '肇庆','惠州', '梅州', '汕尾', '河源', '阳江', '清远', '东莞', '中山', '潮州', '揭阳', '云浮'];
			cityList['广西'] = ['南宁', '柳州', '桂林', '梧州', '北海', '防城港', '钦州', '贵港', '玉林', '百色', '贺州', '河池', '来宾', '崇左'];
			cityList['海南'] = ['海口','三亚'];
			cityList['四川'] = ['成都', '自贡', '攀枝花', '泸州', '德阳', '绵阳','广元', '遂宁', '内江', '乐山', '南充', '宜宾', '广安', '达州', '眉山', '雅安', '巴中', '资阳', '阿坝', '甘孜', '凉山'];
			cityList['贵州'] = ['贵阳','六盘水','遵义', '安顺', '铜仁', '毕节', '黔西南', '黔东南','黔南'];
			cityList['云南'] = ['昆明', '曲靖', '玉溪', '保山', '昭通', '丽江', '普洱', '临沧', '文山','红河', '西双版纳', '楚雄', '大理', '德宏', '怒江', '迪庆'];
			
			cityList['陕西'] = ['西安','铜川', '宝鸡', '咸阳', '渭南', '延安', '汉中', '榆林', '安康', '商洛'];
			cityList['甘肃'] = ['兰州','嘉峪关', '金昌', '白银', '天水', '武威', '张掖', '平凉', '酒泉', '庆阳', '定西', '陇南', '临夏', '甘南'];
			cityList['青海'] = ['西宁','海东', '海北', '黄南', '海南', '果洛', '玉树', '海西'];
			
			
			
			//获得省份选项的索引，这里使用标识
			var pIndex=document.myform.province.value;
			//清空
			document.myform.city.options.length=0;
			//添加市
			//for (var j in cityList[pIndex])
			for(var j = 0 ; j< cityList[pIndex].length; j++)
			{
				document.myform.city.options.add(new Option(cityList[pIndex][j], cityList[pIndex][j]));
		    }
		}
	</script>
</head>
<body style="text-align: left;font-size: 30px">
	<form name="myform" action="" method="post" >
		
		<br>请选择省：		
		<select name="province" οnchange="changeCity()">
			<option  value="请选择省">请选择省</option>
			
			<option  value="北京">北京</option>
			<option  value="上海">上海</option>
			<option  value="天津">天津</option>
			<option  value="重庆">重庆</option>
			
			<option  value="香港">香港</option>
			<option  value="澳门">澳门</option>
			<option  value="台湾">台湾</option>
			
			<option  value="内蒙古">内蒙古</option>
			<option  value="新疆">新疆</option>
			<option  value="广西">广西</option>
			<option  value="西藏">西藏</option>
			<option  value="宁夏">宁夏</option>
			
			<option  value="辽宁">辽宁</option>
			<option  value="吉林">吉林</option>
			<option  value="黑龙江">黑龙江</option>
			<option  value="河北">河北</option>
			<option  value="陕西">陕西</option>
			<option  value="山西">山西</option>
			<option  value="甘肃">甘肃</option>
			<option  value="青海">青海</option>
			<option  value="山东">山东</option>
			<option  value="安徽">安徽</option>

			<option  value="江苏">江苏</option>
			<option  value="浙江">浙江</option>
			<option  value="河南">河南</option>
			<option  value="湖北">湖北</option>
			<option  value="湖南">湖南</option>
			<option  value="江西">江西</option>
			<option  value="福建">福建</option>
			<option  value="云南">云南</option>
			<option  value="海南">海南</option>
			<option  value="四川">四川</option>
			
			<option  value="贵州">贵州</option>
			<option  value="广东">广东</option>
			<option  value="湖北">湖北</option>
			
		</select>
		
		<br>请选择市：	
		<select name="city">
			<option value="请选择市">请选择市</option>
		</select>
		
	</form>
</body>
</html>