您的位置：首页 > Web前端 > JavaScript

JavaScript的三级联动（省市县）

2016-05-24 21:00 549 查看

<!DOCTYPE html>
<html>
<head>
<title>SanJiLianDong.html</title>

</head>

<script type="text/javascript">
//按照省份的下拉列表的顺序定义二维数组  将城市列表对应到省份下
var city=[
["杭州市","温州市","宁波市","绍兴市"],//浙江省
["济南市","青岛市","济宁市","潍坊市"],//山东省
["广州市","潮阳","澄海","潮州"],//广东省
["兰州市","白银","敦煌","定西"]//甘肃省
];

//县区数组
var qu=[
[
["杭州一区","杭州二区"],
["温州一区","温州二区"],
["宁波一区","宁波二区"],
["绍兴一区","绍兴二区"]
],

[
["济南一区","济南二区"],
["青岛一区","青岛二区"],
["济宁一区","济宁二区"],
["潍坊一区","潍坊二区"],
],

[
["广州一区","广州二区"],
["潮阳一区","潮阳二区"],
["澄海一区","澄海二区"],
["潮州一区","潮州二区"],
],

[
["兰州一区","兰州二区"],
["白银一区","白银二区"],
["敦煌一区","敦煌二区"],
["定西一区","定西二区"],
]

];

function getCity(){
//获得省份和城市的下拉列表
var sltProvince = document.forms["theform"].province;

var sltCity = document.forms[0].city;

//将对应的城市添加到省份下拉列表之下
var provinceCity= city[sltProvince.selectedIndex-1];

//将城市下拉列表清空
sltCity.length = 1;

//将provinceCity 填充到city之下
for(var i = 0;i<provinceCity.length;i++){
//创建新的option  添加到city之下
sltCity[i+1] = new Option(provinceCity[i],provinceCity[i]);
}

}

function getQu(){

//获得省份,城市,县区的下拉列表
var sltProvince = document.forms["theform"].province;
var sltCity = document.forms[0].city;
var sltQu = document.forms[0].qu;

//将对应的县区添加到城市下拉列表之下
var cityQu = qu[sltProvince.selectedIndex-1][sltCity.selectedIndex-1];

//将县区下拉列表清空
sltQu.length = 1;

//将cityQu 填充到qu之下
for(var i = 0;i<cityQu.length;i++){
//创建新的option  添加到qu之下
sltQu[i+1] = new Option(cityQu[i],cityQu[i]);
}
}

</script>

<body>
<form action="" name="theform">
<select name="province" onchange="getCity()">
<option value = "0">请选择所在的省份</option>
<option value="1">浙江省</option>
<option value="2">山东省</option>
<option value="3">广东省</option>
<option value="4">甘肃省</option>
</select>

<select id="city" onchange="getQu()">
<option value = "0">请选择所在的城市</option>
</select>

<select name = "qu">
<option value = "0">请选择所在的县区</option>
</select>

</form>

</body>
</html>

运行结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

JavaScript的三级联动（省 市 县）

JavaScript的三级联动（省市县）