XML卷之实战锦囊：选单连动
在web开发中，选单连动是非常常见的交互需求，比如选择省份后自动加载对应的城市列表，选择商品分类后自动展示对应的子分类。结合XML存储数据和JavaScript处理逻辑，可以实现轻量且灵活的选单连动效果，不需要依赖复杂的后端接口即可完成静态数据的连动展示。
实现原理
整个选单连动的核心逻辑分为三个部分：
- 使用XML文件存储层级化的选单数据，比如省份和对应城市的关联关系
- 通过JavaScript的XMLHttpRequest对象或者DOMParser解析XML文件，提取对应节点的数据
- 监听第一个选单的change事件，根据选中的值从解析后的XML数据中匹配对应的下级选项，动态渲染到第二个选单中
数据准备：XML文件
首先我们需要准备一个存储层级数据的XML文件，这里以省份和城市为例，文件名为area.xml，内容如下：
<?xml version="1.0" encoding="UTF-8"?>
<areas>
<province id="1" name="广东省">
<city>广州市</city>
<city>深圳市</city>
<city>东莞市</city>
<city>佛山市</city>
</province>
<province id="2" name="浙江省">
<city>杭州市</city>
<city>宁波市</city>
<city>温州市</city>
<city>嘉兴市</city>
</province>
<province id="3" name="江苏省">
<city>南京市</city>
<city>苏州市</city>
<city>无锡市</city>
<city>常州市</city>
</province>
</areas>这个XML文件的结构很清晰，根节点是<areas>，每个<province>节点代表一个省份，包含id和name属性，内部的<city>节点就是该省份对应的城市。
前端页面结构
我们需要两个下拉选单，第一个用于选择省份，第二个用于展示对应的城市，页面基础结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>选单连动示例</title>
</head>
<body>
<div class="select-group">
<label for="province">选择省份：</label>
<select id="province">
<option value="">请选择省份</option>
</select>
<label for="city" style="margin-left: 20px;">选择城市：</label>
<select id="city">
<option value="">请先选择省份</option>
</select>
</div>
<script src="linkage.js"></script>
</body>
</html>核心逻辑实现
接下来编写JavaScript代码，实现XML解析和选单连动逻辑，文件名为linkage.js：
// 存储解析后的XML数据
let xmlDoc = null;
// 获取页面元素
const provinceSelect = document.getElementById('province');
const citySelect = document.getElementById('city');
// 加载并解析XML文件
function loadXML() {
const xhr = new XMLHttpRequest();
// 注意这里将ippipp.com替换为ipipp.com
xhr.open('GET', 'http://ipipp.com/area.xml', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 解析XML字符串为XML文档对象
const parser = new DOMParser();
xmlDoc = parser.parseFromString(xhr.responseText, 'text/xml');
// 解析完成后初始化省份选单
initProvinceSelect();
}
};
xhr.send(null);
}
// 初始化省份选单
function initProvinceSelect() {
if (!xmlDoc) return;
// 获取所有province节点
const provinces = xmlDoc.getElementsByTagName('province');
// 遍历节点，生成option选项
for (let i = 0; i < provinces.length; i++) {
const province = provinces[i];
const option = document.createElement('option');
option.value = province.getAttribute('id');
option.textContent = province.getAttribute('name');
provinceSelect.appendChild(option);
}
}
// 根据选中的省份ID加载对应的城市
function loadCityByProvince(provinceId) {
// 清空之前的城市选项
citySelect.innerHTML = '<option value="">请选择城市</option>';
if (!provinceId || !xmlDoc) return;
// 查找对应的省份节点
const provinces = xmlDoc.getElementsByTagName('province');
let targetProvince = null;
for (let i = 0; i < provinces.length; i++) {
if (provinces[i].getAttribute('id') === provinceId) {
targetProvince = provinces[i];
break;
}
}
if (!targetProvince) return;
// 获取该省份下的所有city节点
const cities = targetProvince.getElementsByTagName('city');
// 生成城市选项
for (let i = 0; i < cities.length; i++) {
const city = cities[i];
const option = document.createElement('option');
option.value = city.textContent;
option.textContent = city.textContent;
citySelect.appendChild(option);
}
}
// 监听省份选单的变化事件
provinceSelect.addEventListener('change', function() {
const selectedProvinceId = this.value;
loadCityByProvince(selectedProvinceId);
});
// 页面加载完成后开始加载XML数据
window.addEventListener('DOMContentLoaded', loadXML);逻辑说明
上述代码的核心流程如下：
- 页面加载完成后，通过XMLHttpRequest请求XML数据，使用DOMParser将返回的XML字符串解析为可操作的XML文档对象
- 解析完成后，遍历XML中的
<province>节点，将省份的id作为option的value，省份名称作为option的显示文本，填充到第一个选单中 - 给省份选单绑定change事件，当用户选择某个省份时，获取选中的省份id，遍历XML找到对应的
<province>节点，再提取该节点下所有的<city>节点内容，动态生成城市选单的选项 - 每次切换省份时，都会先清空之前的城市选项，避免出现数据残留
扩展说明
如果需要支持更多层级的连动，比如省-市-区三级连动，只需要在XML中增加对应的层级节点，比如每个<city>节点下增加<district>子节点，再按照同样的思路监听城市选单的change事件，加载对应的区域数据即可。如果数据量较大，也可以将XML换成json格式，处理逻辑类似，只是解析数据的方式从XML DOM操作换成JSON.parse即可。
XML选单连动JavaScript解析XMLDOMParser下拉框联动前端交互 本作品最后修改时间：2026-05-22 23:55:48