在Web开发中，地区联动是很常见的功能。
例如，购物、外卖等需要选择填写的送货地址。
其中，省份城市的三级联动则是最基础的功能。
接下来利用数组保存相关的省份、城市和地区的信息。
数组保存的思路：
①一维数组provinces保存省、自治区和直辖市。
②二维数组cities保存对应省、自治区和直辖市下的所有城市，存储时要保证cities[index]中index值与对应provinces中元素的下标索引相同。
③同理，利用三维数组保存每个城市下的区域的所有区域。
代码实现思路：
①创建HTML表单，实现省份、城市、区域的下拉列表。
②创建数组保存省份城市区域的数据。
③编写函数createOption()用于创建指定下拉菜单的选项。
④选择省份后，显示对应城市菜单（利用onchange事件）。
⑤选择城市后，显示对应区域菜单（利用onchange事件）。
⑥修改省份后，更新城市和区域下拉菜单。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>省市三级联动</title>
</head>
<body>
<select id="province">
<option value="-1">请选择</option>
</select>
<select id="city">
</select>
<select id="country">
</select>
<script>
var provinceArr =['上海','江苏','河北'];
var cityArr =[
['上海市'],
['苏州市','南京市','扬州市'],
['石家庄','秦皇岛','张家口']
];
var countryArr = [
[
['黄浦区','静安区','长宁区','浦东区']
],
[
['虎丘区','吴中区','相城区','姑苏区','吴江区'],
['玄武区','秦淮区','建邺区','鼓楼区','浦口区'],
['邗江区','广陵区','江都区']
],
[
['长安区','桥西区','新华区','井陉矿区'],
['海港区','山海关区','北戴河区','抚宁区'],
['桥东区','桥西区','宣化区','下花园区']
]
]
function createOption(obj,data)
{
for(var i in data)
{
var op = new Option(data[i],i);//注意Option的O大写
obj.options.add(op);
}
}
var provice = document.getElementById('province');
createOption(provice,provinceArr);
var city = document.getElementById('city');
provice.onchange = function()
{
city.options.length =0;
createOption(city,cityArr[provice.value]);
if(provice.value>=0){ city.onchange();}//自动添加城市区域下拉菜单
else{ country.options.length = 0;}//清空country下原有的option
}
var country = document.getElementById('country');
city.onchange = function()
{
country.options.length = 0;
createOption(country,countryArr[provice.value][city.value]);
}
</script>
</body>
</html>
