1.前言
三级联动菜单是web开发中常用的表单元素之一，实现用户在三级联动菜单中选择相应的地区信息。本篇文章将使用JavaScript实现三级联动菜单，并对代码逻辑进行详细解析。
2.HTML结构
2.1.基本HTML结构
先来看一下三级联动菜单的基本HTML结构：
<select id="province">
<option value="">请选择省份</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<select id="district">
<option value="">请选择区县</option>
</select>
三级联动菜单由三个<select>标签组成，分别用来选择省份、城市和区县信息。
2.2.动态生成HTML结构
为了实现三级联动菜单的动态生成，我们需要在JavaScript中通过遍历数据来生成对应的<select>标签
function createOption(obj,element)
{
for(var i in obj)
{
var opt=document.createElement("option");
opt.text=obj[i].name;
opt.value=obj[i].code;
element.add(opt);
}
}
createOption函数接收两个参数，第一个是包含省份、城市和区县信息的数组，第二个是要生成<option>标签的<select>元素。
3.数据结构
3.1.JSON格式
在三级联动菜单中，我们需要使用省份、城市和区县的名称和代码信息。为了方便使用，我们将这些数据放在一个JSON对象中：
var data={
"province":[
{
"name":"北京市",
"code":"110000",
"city":[
{
"name":"市辖区",
"code":"110100",
"district":[
{"name":"东城区","code":"110101"},
{"name":"西城区","code":"110102"},
{"name":"崇文区","code":"110103"},
//省略部分代码
]
},
{
"name":"县",
"code":"110200",
"district":[
{"name":"密云县","code":"110228"},
{"name":"延庆县","code":"110229"}
]
}
]
},
//省略部分代码
]
};
数据中包含三个属性：province（省份信息）、city（城市信息）和district（区县信息），通过这些数据，我们可以构建三级联动菜单。
3.2.获取区域信息编码
在三级联动菜单中，数据源信息仅仅是省份、城市和区县的名称和代码信息，最终用户选择的是区域信息编码（如北京市市辖区东城区的区域信息编码为110101）。在实现三级联动菜单前，我们需要先获取区域信息编码。
function getAreaCode(province,city,district)
{
for(var i in data.province)
{
if(data.province[i].name==province)
{
for(var j in data.province[i].city)
{
if(data.province[i].city[j].name==city)
{
for(var k in data.province[i].city[j].district)
{
if(data.province[i].city[j].district[k].name==district)
{
return data.province[i].city[j].district[k].code;
}
}
}
}
}
}
}
getAreaCode函数接收三个参数，分别是省份、城市和区县信息，通过遍历data中的数据来查找对应的区域信息编码。
4.逻辑实现
4.1.省份信息加载
当页面加载完成时，我们需要先将省份信息加载进页面中：
//页面加载完成时，加载省份信息
window.onload=function()
{
var province=document.getElementById("province");
createOption(data.province,province);
};
当页面加载后，我们将省份信息加载进<select>标签的option中，通过createOption函数循环读取省份信息，然后逐个生成对应的<option>标签。
4.2.选择省份信息
当用户选择省份信息时，我们需要根据省份名称来生成对应的城市信息：
//省份信息改变时，加载对应的城市信息
var province=document.getElementById("province");
province.onchange=function()
{
var provinceName=this.value;
var city=document.getElementById("city");
var district=document.getElementById("district");
//清空城市和区县信息
city[xss_clean]="<option value=''>请选择城市</option>";
district[xss_clean]="<option value=''>请选择区县</option>";
//生成城市信息
createOption(data.province[provinceName].city,city);
};
当用户选择省份信息时，我们先获取省份信息的名称，然后根据名称遍历data中的数据，找到对应的城市信息并生成对应的选项。
4.3.选择城市信息
当用户选择城市信息时，我们需要根据城市名称来生成对应的区县信息：
//城市信息改变时，加载对应的区县信息
var city=document.getElementById("city");
city.onchange=function()
{
var cityName=this.value;
var district=document.getElementById("district");
//清空区县信息
district[xss_clean]="<option value=''>请选择区县</option>";
//生成区县信息
createOption(data.province[provinceName].city[cityName].district,district);
};
当用户选择城市信息时，我们先获取城市信息的名称，然后根据名称遍历data中的数据，找到对应的区县信息并生成对应的选项。
4.4.选择区县信息
当用户选择区县信息时，我们需要根据省份、城市和区县信息生成对应的区域信息编码：
//区县信息改变时，获取对应的区域信息编码
var district=document.getElementById("district");
district.onchange=function()
{
var provinceName=document.getElementById("province").value;
var cityName=document.getElementById("city").value;
var districtName=this.value;
var code=getAreaCode(provinceName,cityName,districtName);
alert(code);
};
当用户选择区县信息时，我们先获取用户选择的省份、城市和区县信息，然后通过getAreaCode函数获取对应的区域信息编码。
5.总结
本篇文章介绍了通过JavaScript实现三级联动菜单的方法。我们先通过遍历data中的数据来生成对应省份、城市和区县的<option>选项，然后根据用户选择的省份、城市和区县信息来生成对应的<option>选项，最终通过区县信息来获取对应的区域信息编码。
三级联动菜单虽然实现起来稍微复杂一点，但是通过掌握本文所介绍的方法，相信您也能够轻松实现三级联动菜单的功能。