假设我们有三个下拉框，分别是“省份”、“城市”和“区县”。当“省份”下拉框的选项值发生改变时，我们须要动态更新“城市”下拉框的选项值，并且根据“城市”的选项值动态更新“区县”下拉框的选项值。详细实现步骤如下：
1 首先在 HTML 文件中定义三个下拉框，并分别给它们一个唯一的 ID，如下所示：
<label>省份：</label><select id="province"></select><label>城市：</label><select id="city"></select><label>区县：</label><select id="district"></select>
2 在 JavaScript 中定义三个函数，分别用于更新“城市”、“区县”下拉框的选项值，以及初始化页面时的默认值：
// 更新城市下拉框内容function updateCity() { var provinceSelect = document.getElementById("province"); var citySelect = document.getElementById("city"); citySelect.innerHTML = ""; // 清空城市下拉框内容 // 根据选中的省份，获取该省份对应的城市列表 var provinceName = provinceSelect.value; var cityList = getCityList(provinceName); // 根据城市列表，动态天生城市下拉框的选项 for (var i = 0; i < cityList.length; i++) { var option = document.createElement("option"); option.text = cityList[i]; citySelect.add(option); } // 触发区县下拉框更新 updateDistrict();}// 更新区县下拉框内容function updateDistrict() { var citySelect = document.getElementById("city"); var districtSelect = document.getElementById("district"); districtSelect.innerHTML = ""; // 清空区县下拉框内容 // 根据选中的城市，获取该城市对应的区县列表 var cityName = citySelect.value; var districtList = getDistrictList(cityName); // 根据区县列表，动态天生区县下拉框的选项 for (var i = 0; i < districtList.length; i++) { var option = document.createElement("option"); option.text = districtList[i]; districtSelect.add(option); }}// 初始化页面function initPage() { var provinceSelect = document.getElementById("province"); var citySelect = document.getElementById("city"); var districtSelect = document.getElementById("district"); // 根据省份列表，动态天生省份下拉框的选项 for (var i = 0; i < provinceList.length; i++) { var option = document.createElement("option"); option.text = provinceList[i]; provinceSelect.add(option); } // 触发城市下拉框更新 updateCity();}
现在我们已经完成了省份和城市两个下拉框的联动效果，接下来我们须要再次绑定城市下拉框的change事宜，以实现城市与区县下拉框的联动。
首先，我们须要在HTML中添加第三个下拉框，用于选择区县：
<select id="county"></select>
然后，我们须要更新updateCity和initPage两个函数，使其能够更新城市和区县两个下拉框：
function updateCity() { var province = document.getElementById('province').value; var cityOptions = ''; for (var i = 0; i < cities[province].length; i++) { cityOptions += '<option value="' + cities[province][i] + '">' + cities[province][i] + '</option>'; } document.getElementById('city').innerHTML = cityOptions; // 清空区县下拉框 document.getElementById('county').innerHTML = '<option value="">--请选择--</option>';}function updateCounty() { var province = document.getElementById('province').value; var city = document.getElementById('city').value; var countyOptions = ''; for (var i = 0; i < counties[province][city].length; i++) { countyOptions += '<option value="' + counties[province][city][i] + '">' + counties[province][city][i] + '</option>'; } document.getElementById('county').innerHTML = countyOptions;}function initPage() { // 初始化省份下拉框 var provinceOptions = '<option value="">--请选择--</option>'; for (var province in cities) { provinceOptions += '<option value="' + province + '">' + province + '</option>'; } document.getElementById('province').innerHTML = provinceOptions; // 绑定省份下拉框的change事宜 document.getElementById('province').addEventListener('change', updateCity); // 初始化城市下拉框 updateCity(); // 绑定城市下拉框的change事宜 document.getElementById('city').addEventListener('change', updateCounty); // 初始化区县下拉框 updateCounty();}
在updateCity函数中，我们添加了清空区县下拉框的代码，以确保每次变动城市时，区县下拉框都会被清空。
在updateCounty函数中，我们根据选择的省份和城市，动态天生区县下拉框的选项。
在initPage函数中，我们绑定了城市下拉框的change事宜，并调用updateCounty函数初始化区县下拉框的选项。
末了，我们须要在JavaScript代码中定义counties变量，以存储每个城市对应的区县信息：
var counties = { "北京市": { "市辖区": ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区"], "县": ["密云县", "延庆县"] }, "上海市": { "市辖区": ["黄浦区", "卢湾区", "徐汇区", "长宁区", "静安区", "普陀区", "闸北区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "南汇区", "奉贤区"], "县": ["崇明县"] }, // 省略部分数据...};
接下来是第三个函数setDefaultValue()，用于初始化页面时设置默认值。在这个函数中，我们先根据省份的默认值设置省份下拉框的选中项，然后根据省份和城市的默认值，从数据中获取相应的区县数据，并设置区县下拉框的选项。
function setDefaultValue() { // 设置省份下拉框默认选中项 var provinceSelect = document.getElementById("province"); for (var i = 0; i < provinceSelect.options.length; i++) { if (provinceSelect.options[i].value === defaultProvince) { provinceSelect.selectedIndex = i; break; } } // 根据省份和城市设置区县下拉框选项 var citySelect = document.getElementById("city"); var districtSelect = document.getElementById("district"); var districtData = data[defaultProvince][defaultCity]; districtSelect.options.length = 0; // 清空区县下拉框 for (var i = 0; i < districtData.length; i++) { var option = new Option(districtData[i], districtData[i]); if (districtData[i] === defaultDistrict) { option.selected = true; // 设置默认选中项 } districtSelect.options.add(option); }}
在这个函数中，我们首先获取省份下拉框的DOM元素，并通过循环找到选中项为默认省份的选项，并设置为选中状态。然后获取城市和区县的DOM元素，并从数据中获取对应的区县数据。末了根据区县数据动态创建选项，并设置默认选中项。把稳，在设置区县下拉框的选项时，我们先要将下拉框的长度设为0，以清空之前的选项。同时，我们还须要为新创建的选项设置selected属性，以设置默认选中项。
以上便是一个大略的基于JavaScript和HTML DOM实现联动菜单的示例，可以根据详细的业务需求进行扩展和修正。
