每日分享- js 結合 HTML DOM 如何實作關聯菜單

關聯菜單通常是指一個下拉框的選項值發生改變後，另一個下拉框的選項值會發生對應的變化。在 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實作關聯菜單的示例，可以根據具體的業務需求進行擴充和修改。