對于Web開發者來說，JavaScript是不可或缺的一門語言。而JavaScript的優點之一就是其能夠創建動態交互的用戶界面。在本文中，我們將介紹如何使用JavaScript制作一個二級聯動菜單，以便您的用戶可以更容易地瀏覽和選擇他們所需要的信息。

二級聯動菜單是指有兩個級別的下拉菜單。第一個下拉菜單用于選擇主選項，第二個下拉菜單用于選擇次選項。例如，在一個國家和城市選擇器中，第一個下拉列表是國家名稱，第二個下拉列表是可選城市名稱。

下面我們來看一個簡單的例子。在這個例子中，我們將創建一個下拉列表，其中第一個下拉列表包含不同的類型，第二個下拉列表包含具體的信息。例如，在第一個下拉列表中，我們可以選擇不同的手機品牌，而在第二個下拉列表中，我們可以選擇該品牌的不同型號。

<select id="brand">
<option value="">請選擇品牌</option>
<option value="apple">Apple</option>
<option value="samsung">Samsung</option>
<option value="huawei">Huawei</option>
</select>
<select id="model"></select>

在這個例子中，我們創建了兩個下拉列表。第一個下拉列表的id為“brand”，包含不同的手機品牌選項。第二個下拉列表的id為“model”，最初是空的。接下來我們將使用JavaScript來實現二級聯動菜單的功能。

首先，我們需要使用addEventListener()方法為第一個下拉列表綁定一個“change”事件。每當用戶選擇不同的選項，該事件都會觸發一個函數。在該函數中，我們可以添加適當的代碼來更新第二個下拉列表，以反映第一個下拉列表選擇的變化。

var brandSelect = document.getElementById("brand");
var modelSelect = document.getElementById("model");
brandSelect.addEventListener("change", function() {
// 添加更新第二個下拉列表的代碼
});

在上面的代碼中，我們使用了document.getElementById()方法來獲取第一個和第二個下拉列表的元素。我們還使用了addEventListener()方法為第一個下拉列表添加了一個“change”事件。當用戶改變第一個下拉列表中的選項時，該事件會觸發一個回調函數。在該回調函數中，我們將添加適當的代碼來更新第二個下拉列表。

下面是一個示例代碼，用于更新第二個下拉列表中的選項。在這個例子中，我們首先刪除了第二個下拉列表中的所有選項。我們然后遍歷包含所選品牌信息的對象數組，并在添加到第一個下拉列表時向第二個下拉列表添加相應的型號。

var brandModel = [
{ brand: "apple", models: ["iPhone X", "iPhone 11", "iPhone 12"] },
{ brand: "samsung", models: ["Galaxy S20", "Galaxy Note 20", "Galaxy Fold"] },
{ brand: "huawei", models: ["P40 Pro", "Mate 40 Pro", "Nova 7i"] },
];
brandSelect.addEventListener("change", function() {
var selectedBrand = this.value;
// 清空第二個下拉列表中的選項
while (modelSelect.options.length >0) {
modelSelect.remove(0);
}
// 遍歷包含所選品牌信息的對象數組
for (var i = 0; i< brandModel.length; i++) {
if (brandModel[i].brand === selectedBrand) {
var models = brandModel[i].models;
for (var j = 0; j< models.length; j++) {
// 向第二個下拉列表添加相應的型號
var option = document.createElement("option");
option.text = models[j];
modelSelect.add(option);
}
break;
}
}
});

在以上代碼中，我們首先創建了一個包含所有品牌和型號信息的對象數組。當第一個下拉列表中的選項更改時，我們遍歷該數組，找到與所選品牌匹配的條目。如果匹配成功，我們將其相關的型號添加到第二個下拉列表中。

二級聯動菜單可以大大提高用戶瀏覽和選擇信息時的效率和體驗。使用JavaScript，我們可以輕松地創建這種菜單，并提供高度交互性。希望讀者們通過這篇文章可以感受到JavaScript的實用性和靈活性。