利用dom技术将省份和城市列表项逐一输出,并且假设设置的有默认省份和城市,能直接选中。
2016-06-29_195859

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>城市列表</title>
	<script src="CitysData.js" ></script>

</head>
<body>
<script>

function cc(sf, cs){
	document.write('<select onchange="select(this)" id="provinces">');
	document.write('<option value="">--选择省份--</option>');
	var a=0;
	for(var i=0;i<arrCity.length;i++){
		if(typeof(sf)!="undefined"){
			if(arrCity[i]["name"] == sf){
				var sel ="selected";
				a = i;
			}else{
				var sel="";
			}

		}
		
		document.write('<option ' + sel +' value="'+arrCity[i]["name"]+'">'+arrCity[i]["name"]+'</option>');
	}
	document.write("</select>");

	document.write('<select id="citys" name="+cname+">');
	document.write('<option value="">--选择城市--</option>');
	document.write("</select>");
	if(a >0){
		select(document.getElementById("provinces"), cs, a);
	}
}

function select(proobj, cs ,a){
	
	if(typeof(a)!="undefined"){
		var index =a;
	}else{
		var index = proobj.selectedIndex-1;
	}


	var citys = document.getElementById("citys");
	var sub = arrCity[index]["sub"];
	citys.innerHTML="";
	for(var i=0;i<sub.length;i++){

		if(sub[i]["name"] == cs ){
			var sel ="selected";
		}else{
			var sel="";
		}
		var option =document.createElement("option");
		var text=sub[i]["name"];
		//console.log(text);
		option.value=text;
		option.selected=sel;
		option.innerHTML=text;
		citys.appendChild(option);
	}
}

//用户默认的省份是湖北,城市是武汉
cc("湖北", "武汉");



</script>


	
</body>
</html>

里面的函数“cc”是显示省份,函数“select”是根据用户选定的省份,响应的显示该省管辖的城市。
上面引用的CitysData.js文件里面包含的中国所有的省份名和城市名,用的是百度的数据,地址是城市数据地址,可能部分需要更新。

随机文章

windows版Skitch2.0全新UI更易分享
windows版Skitch2.0全新UI更易分享

修改Eclipse ADT default debug keystore路径
修改Eclipse ADT default debug keystore路径

Android BlueStacksAppPlayer最新测试版发布
Android BlueStacksAppPlayer最新测试版发布

Java基础第二讲:Java基本语法(一)
Java基础第二讲:Java基本语法(一)

文章url别名对谷歌seo有利的新发现
文章url别名对谷歌seo有利的新发现

想找外国老公吗
想找外国老公吗

相关文章

android手机QQ2012很给力
android手机QQ2012很给力

android常用的junit
android常用的junit

在电脑上安装Android模拟器Emulator
在电脑上安装Android模拟器Emulator

FCC调查手机解锁禁令
FCC调查手机解锁禁令

内容分享:道招
本文链接:制作省份城市选择列表
道招声明:除特别标注或作者不详外,本站所有文章均为原创,转载请注明。欢迎共同关注互联网!