js 省市区三级联

最新推荐文章于 2019-08-23 13:30:58 发布

super牛牛

最新推荐文章于 2019-08-23 13:30:58 发布

阅读量650

点赞数

分类专栏： javascript 文章标签： javascript CDATA 级联

本文链接：https://blog.csdn.net/u012668297/article/details/31777881

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!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 type="text/javascript">

function loadCity(index)
{
document.getElementById("selCity").options.length = 1;//城市只留一项
var arr1 = new Array();
arr1[0] = ["武汉市","黄岗市"];
arr1[1] = ["湘潭市","长沙市","楼底市"];
arr1[2] = ["许都市","许昌市","郑州市","开封市"];
arr1[3] = ["三亚市","海口市"];
arr1[4] = ["石家庄市","廊坊市"];
arr1[5] = ["南京市","苏州市","连云港市"];
for(var i in arr1[index])
{
var city = new Option(arr1[index][i],i);
document.getElementById("selCity").options.add(city);
}
}

function loadShen()
{
var arr0 = new Array("湖北省","湖南省","河南省","海南省","河北省","江苏省");
for(var i = 0 ; i < arr0.length ; i++)
{
var opt = new Option(arr0[i],i); //实例化一个option对象
document.getElementById("selShen").options.add(opt);
}
}
//加载地区
function loadEara(index)
{
var shenIndex = document.getElementById("selShen").options.selectedIndex;

document.getElementById("seleara").options.length = 1;
var arr2 = new Array();
switch(shenIndex)
{
case 1:
arr2[0] = ["武昌","洪山"];
arr2[1] = ["黄安","麻"];
break;
case 2:
arr2[0] = ["湘州","湘湘"];
arr2[1] = ["长沙街"];
arr2[2] = ["娄底街","娄底路"];
break;
case 6:
arr2[0] = ["白下区","玄武区","下关区","江宁区","雨花区","六合区","浦口区","高淳县","溧水县","大厂","秦淮区","八卦洲"];
arr2[1] = ["观前街","吴中区","木渎镇","高新区"];
arr2[2] = ["灌南县","灌云县","赣榆县","东海县","新浦区","连云区","涟水县","响水县"];
break;

}
for(var i in arr2[index])
{
var city = new Option(arr2[index][i],i);
document.getElementById("seleara").options.add(city);
}
}
</script>

</head>

<body οnlοad="loadShen()">
<form name="frm1">
<table align="center">
<tr>
<td colspan="3" align="center"><span style="font-size:24px">省市三级联动</span></td>
</tr>
<tr>

<td>
<select id = "selShen" οnchange="loadCity(this.options[selectedIndex].value)">
<option>---请选择省份---</option>
</select>
</td>
<td>
<select id="selCity" οnchange="loadEara(this.options[selectedIndex].value)">
<option>---请选择城市---</option>
</select>
</td>
<td>
<select id="seleara">
<option>---请选择地区---</option>
</select>
</td>
</tr>

</table>
</form>
</body>
</html>