正文

如何轻松实现JS多级联动下拉菜单，快速搭建实用交互界面

/0 浏览量
0805

在网页设计中，多级联动下拉菜单是一种常见的交互方式，它能够帮助用户更高效地选择数据。使用JavaScript来实现这样的功能，不仅可以提升用户体验，还能使页面设计更加灵活。下面，我将详细介绍如何轻松实现JS多级联动下拉菜单，并快速搭建一个实用的交互界面。

一、准备工作

在开始之前，我们需要准备以下几项内容：

  1. HTML结构：定义下拉菜单的基本结构。
  2. CSS样式：为下拉菜单添加样式，使其更加美观。
  3. JavaScript逻辑：编写JS代码，实现联动效果。

二、HTML结构

以下是一个简单的HTML结构示例：

<div class="dropdown">
  <select id="level1">
    <option value="">请选择一级菜单</option>
    <!-- 一级菜单项 -->
  </select>
  <select id="level2" disabled>
    <option value="">请选择二级菜单</option>
    <!-- 二级菜单项 -->
  </select>
  <select id="level3" disabled>
    <option value="">请选择三级菜单</option>
    <!-- 三级菜单项 -->
  </select>
</div>

三、CSS样式

接下来，为下拉菜单添加一些基本样式：

.dropdown select {
  width: 100px;
  margin-right: 10px;
}

四、JavaScript逻辑

以下是实现多级联动下拉菜单的JavaScript代码：

// 假设我们有一组数据，用于填充菜单项
const menuData = [
  {
    id: 1,
    name: "一级菜单1",
    children: [
      {
        id: 11,
        name: "二级菜单1-1",
        children: [
          { id: 111, name: "三级菜单1-1-1" },
          { id: 112, name: "三级菜单1-1-2" }
        ]
      },
      {
        id: 12,
        name: "二级菜单1-2",
        children: [
          { id: 121, name: "三级菜单1-2-1" }
        ]
      }
    ]
  },
  {
    id: 2,
    name: "一级菜单2",
    children: [
      {
        id: 21,
        name: "二级菜单2-1",
        children: [
          { id: 211, name: "三级菜单2-1-1" }
        ]
      }
    ]
  }
];

// 初始化一级菜单
function initLevel1() {
  const level1 = document.getElementById("level1");
  menuData.forEach(item => {
    const option = document.createElement("option");
    option.value = item.id;
    option.textContent = item.name;
    level1.appendChild(option);
  });
}

// 初始化二级菜单
function initLevel2(levelId) {
  const level2 = document.getElementById("level2");
  const children = menuData.find(item => item.id === levelId).children;
  level2.innerHTML = "<option value="">请选择二级菜单</option>";
  children.forEach(item => {
    const option = document.createElement("option");
    option.value = item.id;
    option.textContent = item.name;
    level2.appendChild(option);
  });
  level2.disabled = false;
}

// 初始化三级菜单
function initLevel3(levelId) {
  const level3 = document.getElementById("level3");
  const children = menuData.find(item => item.id === levelId).children;
  level3.innerHTML = "<option value="">请选择三级菜单</option>";
  children.forEach(item => {
    const option = document.createElement("option");
    option.value = item.id;
    option.textContent = item.name;
    level3.appendChild(option);
  });
  level3.disabled = false;
}

// 为一级菜单添加事件监听器
document.getElementById("level1").addEventListener("change", function() {
  const levelId = this.value;
  initLevel2(levelId);
});

// 为二级菜单添加事件监听器
document.getElementById("level2").addEventListener("change", function() {
  const levelId = this.value;
  initLevel3(levelId);
});

// 页面加载完毕后，初始化一级菜单
window.onload = initLevel1;

五、总结

通过以上步骤，我们成功实现了一个多级联动下拉菜单。在实际应用中，你可以根据需求调整数据结构和样式，以满足不同的设计需求。希望这篇文章能帮助你快速搭建实用的交互界面。

-- 展开阅读全文 --