给出代码
时间: 2023-07-09 13:11:13 浏览: 50
以下是一个基于AJAX的联级菜单三级的示例代码:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基于AJAX的联级菜单三级</title>
</head>
<body>
<div>
<label for="province">省份:</label>
<select id="province"></select>
</div>
<div>
<label for="city">城市:</label>
<select id="city"></select>
</div>
<div>
<label for="district">区县:</label>
<select id="district"></select>
</div>
<script src="menu.js"></script>
</body>
</html>
```
JavaScript代码(menu.js):
```javascript
// 定义菜单数据的XML文件路径
var menuDataUrl = "menu.xml";
// 定义省份、城市、区县三个下拉菜单的DOM元素
var provinceSelect = document.getElementById("province");
var citySelect = document.getElementById("city");
var districtSelect = document.getElementById("district");
// 定义保存菜单数据的JavaScript对象
var menuData = {};
// 加载菜单数据
function loadMenuData() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 解析XML数据为JavaScript对象
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xhr.responseText, "text/xml");
menuData = parseMenuData(xmlDoc);
// 初始化省份下拉菜单
initProvinceSelect();
}
};
xhr.open("GET", menuDataUrl, true);
xhr.send();
}
// 解析菜单数据XML为JavaScript对象
function parseMenuData(xmlDoc) {
var menuData = {};
var provinces = xmlDoc.getElementsByTagName("province");
for (var i = 0; i < provinces.length; i++) {
var province = provinces[i];
var provinceId = province.getAttribute("id");
menuData[provinceId] = {};
var cities = province.getElementsByTagName("city");
for (var j = 0; j < cities.length; j++) {
var city = cities[j];
var cityId = city.getAttribute("id");
menuData[provinceId][cityId] = [];
var districts = city.getElementsByTagName("district");
for (var k = 0; k < districts.length; k++) {
var district = districts[k];
var districtId = district.getAttribute("id");
var districtName = district.textContent;
menuData[provinceId][cityId].push({
id: districtId,
name: districtName
});
}
}
}
return menuData;
}
// 初始化省份下拉菜单
function initProvinceSelect() {
provinceSelect.options.length = 0;
for (var provinceId in menuData) {
var provinceName = document.createTextNode(provinceId);
var option = document.createElement("option");
option.value = provinceId;
option.appendChild(provinceName);
provinceSelect.appendChild(option);
}
// 初始化城市和区县下拉菜单
initCitySelect();
initDistrictSelect();
}
// 初始化城市下拉菜单
function initCitySelect() {
citySelect.options.length = 0;
var provinceId = provinceSelect.value;
if (menuData[provinceId]) {
for (var cityId in menuData[provinceId]) {
var cityName = document.createTextNode(cityId);
var option = document.createElement("option");
option.value = cityId;
option.appendChild(cityName);
citySelect.appendChild(option);
}
}
// 初始化区县下拉菜单
initDistrictSelect();
}
// 初始化区县下拉菜单
function initDistrictSelect() {
districtSelect.options.length = 0;
var provinceId = provinceSelect.value;
var cityId = citySelect.value;
if (menuData[provinceId] && menuData[provinceId][cityId]) {
for (var i = 0; i < menuData[provinceId][cityId].length; i++) {
var districtId = menuData[provinceId][cityId][i].id;
var districtName = menuData[provinceId][cityId][i].name;
var districtNameNode = document.createTextNode(districtName);
var option = document.createElement("option");
option.value = districtId;
option.appendChild(districtNameNode);
districtSelect.appendChild(option);
}
}
}
// 绑定省份下拉菜单的change事件
provinceSelect.addEventListener("change", function() {
initCitySelect();
});
// 绑定城市下拉菜单的change事件
citySelect.addEventListener("change", function() {
initDistrictSelect();
});
// 页面加载完成后加载菜单数据
window.addEventListener("load", function() {
loadMenuData();
});
```
XML文件(menu.xml):
```xml
<?xml version="1.0" encoding="UTF-8"?>
<menu>
<province id="广东">
<city id="广州">
<district id="天河区">天河区</district>
<district id="海珠区">海珠区</district>
<district id="荔湾区">荔湾区</district>
<district id="越秀区">越秀区</district>
</city>
<city id="深圳">
<district id="福田区">福田区</district>
<district id="罗湖区">罗湖区</district>
<district id="南山区">南山区</district>
<district id="宝安区">宝安区</district>
</city>
<city id="珠海">
<district id="香洲区">香洲区</district>
<district id="金湾区">金湾区</district>
<district id="斗门区">斗门区</district>
</city>
</province>
<province id="湖南">
<city id="长沙">
<district id="芙蓉区">芙蓉区</district>
<district id="天心区">天心区</district>
<district id="岳麓区">岳麓区</district>
<district id="开福区">开福区</district>
</city>
<city id="株洲">
<district id="荷塘区">荷塘区</district>
<district id="芦淞区">芦淞区</district>
<district id="石峰区">石峰区</district>
<district id="天元区">天元区</district>
</city>
<city id="湘潭">
<district id="雨湖区">雨湖区</district>
<district id="岳塘区">岳塘区</district>
<district id="湘乡市">湘乡市</district>
</city>
</province>
</menu>
```
注意:由于涉及到跨域问题,在实际环境中需要在服务器端设置相关的CORS(跨域资源共享)规则,以允许客户端跨域访问XML文件中的数据。