制作省份城市选择列表

利用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文件里面包含的中国所有的省份名和城市名,用的是百度的数据,地址是城市数据地址,可能部分需要更新。

发表评论

电子邮件地址不会被公开。 必填项已用*标注