js中省市级联的实现

最新推荐文章于 2019-01-28 17:33:06 发布

xiaoai5324

最新推荐文章于 2019-01-28 17:33:06 发布

阅读量591

点赞数

CC 4.0 BY-SA版权

分类专栏：数组 js 文章标签： html js javascript

本文链接：https://blog.youkuaiyun.com/xiaoai5324/article/details/30052811

js 同时被 2 个专栏收录

9 篇文章

订阅专栏

数组

3 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
countries=["中国","美国","英国"];
//中国省、直辖市
countries["中国"]=['北京', '上海', '重庆', '广东', '湖北', '浙江','湖南','新疆','西藏'];
//美国
countries["美国"]=['华盛顿', '纽约', '拉斯维加斯', '底特律', '夏威夷', '洛杉矶', '丹佛', '休斯敦'];
//英国
countries["英国"]=['伦敦', '曼彻斯特', '利兹', '纽卡斯尔', '伯明翰'];

//广东省下的市
countries["中国"]["广东"]=['广州','东莞','惠州'];
//湖北省下的市
countries["中国"]["湖北"]=['鄂州','宜昌','武汉','荆州','荆门','黄石','襄樊'];
//浙江省下的市
countries["中国"]["浙江"]=['杭州','温州','金华','义乌','宁波'];
//湖南省下的市
countries["中国"]["湖南"]=['岳阳','湘潭','长沙'];

function show_p(thisCountry)
{
	document.getElementById("city").innerHTML="";
	document.getElementById("province").innerHTML="";
	if(thisCountry!="")
	{
		var p="";
		for(i=0;i<countries[thisCountry].length;i++)
		{
			p+="<option value='"+countries[thisCountry][i]+"'>"+countries[thisCountry][i]+"</option>";
		}
		
		document.getElementById("province").innerHTML="<select onchange=showC('"+thisCountry+"',this.value)>"+p+"</select>";
	}
	else
		document.getElementById("province").innerHTML="";
}

function showC(thisCountry,thisP)
{
	document.getElementById("city").innerHTML="";
	var c="";
	for(i=0;i<countries[thisCountry][thisP].length;i++)
	{
		c+="<option>"+countries[thisCountry][thisP][i]+"</option>";
	}
	
	document.getElementById("city").innerHTML="<select>"+c+"</select>";
}
</script>
</head>

<body>
请选择国家：
<select id="country" onchange="show_p(this.value)">
	<option value="">请选择国家</option>
	<script language="javascript">
		for(i=0;i<countries.length;i++)
		document.write("<option value='"+countries[i]+"'>"+countries[i]+"</option>");
	</script>
</select>
<span id="province"></span>
<span id="city"></span>
</body>
</html>