联动菜单通常是指一个下拉框的选项值发生改变后，另一个下拉框的选项值会发生对应的变化。在 HTML 页面中，可以使用 JavaScript 结合 HTML DOM 来实现这一功能。下面我来举一个例子。

假设我们有三个下拉框，分别是“省份”、“城市”和“区县”。当“省份”下拉框的选项值发生改变时，我们需要动态更新“城市”下拉框的选项值，并且根据“城市”的选项值动态更新“区县”下拉框的选项值。具体实现步骤如下：

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实现联动菜单的示例，可以根据具体的业务需求进行扩展和修改。