创建二级联动下拉菜单：提升用户体验的指南

文章：如何制作二级联动下拉菜单

在现代Web开发中，用户界面设计至关重要。动态且交互性强的元素可以显著提升用户体验。二级联动下拉菜单就是一种常见的UI元素，它允许用户在多个层级之间进行选择。本文将深入探讨如何在使用HTML、CSS和JavaScript创建一个二级联动下拉菜单。

HTML结构

首先，让我们从HTML结构开始。我们将使用两个<select>元素来创建主菜单和子菜单。主菜单包含顶级选项，而子菜单包含与所选顶级选项关联的子选项。

<select id="main-menu">
  <option value="option1">选项 1</option>
  <option value="option2">选项 2</option>
  <option value="option3">选项 3</option>
</select>

<select id="sub-menu">
  <option value="sub-option1">子选项 1</option>
  <option value="sub-option2">子选项 2</option>
  <option value="sub-option3">子选项 3</option>
</select>

CSS样式

接下来，我们使用CSS来设计菜单的样式。我们将子菜单隐藏，仅在选择主菜单选项时才显示它。

#sub-menu {
  display: none;
}

#main-menu:focus ~ #sub-menu {
  display: block;
}

JavaScript交互

最后，我们使用JavaScript来实现二级联动功能。我们将监听主菜单的change事件，并在用户选择一个选项时动态更新子菜单。

const mainMenu = document.getElementById("main-menu");
const subMenu = document.getElementById("sub-menu");

mainMenu.addEventListener("change", () => {
  const selectedOption = mainMenu.value;

  // 根据所选主菜单选项更新子菜单
  switch (selectedOption) {
    case "option1":
      subMenu.innerHTML = "<option>子选项 1</option><option>子选项 2</option>";
      break;
    case "option2":
      subMenu.innerHTML = "<option>子选项 3</option><option>子选项 4</option>";
      break;
    case "option3":
      subMenu.innerHTML = "<option>子选项 5</option><option>子选项 6</option>";
      break;
  }

  // 显示子菜单
  subMenu.style.display = "block";
});

---