正文

学会Bootstrap多选级联：轻松实现下拉菜单联动效果教程

/0 浏览量
0813

在Web开发中，实现下拉菜单的级联联动是一个常见的需求。Bootstrap是一个流行的前端框架，它提供了丰富的组件和工具来帮助开发者快速构建响应式网站。今天，我们就来一起学习如何使用Bootstrap实现多选级联的下拉菜单。

准备工作

在开始之前，请确保你的项目中已经引入了Bootstrap框架。以下是Bootstrap的CDN链接，你可以将其添加到HTML文档的头部：

<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- 引入Bootstrap JS和依赖的jQuery和Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.9.6/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

步骤一：创建基本结构

首先，我们需要创建两个下拉菜单。一个用于选择父级分类，另一个用于选择子级分类。

<div class="container mt-5">
  <div class="form-group">
    <label for="parentSelect">请选择父级分类</label>
    <select class="form-control" id="parentSelect">
      <option value="">请选择</option>
      <!-- 父级分类选项 -->
    </select>
  </div>
  <div class="form-group">
    <label for="childSelect">请选择子级分类</label>
    <select class="form-control" id="childSelect">
      <option value="">请选择</option>
      <!-- 子级分类选项 -->
    </select>
  </div>
</div>

步骤二：添加数据

接下来，我们需要为下拉菜单添加一些示例数据。这里我们使用JavaScript来动态添加选项。

// 父级分类数据
const parents = [
  { id: 1, name: '分类一' },
  { id: 2, name: '分类二' },
  { id: 3, name: '分类三' }
];

// 子级分类数据
const children = [
  { parentId: 1, id: 4, name: '子分类一' },
  { parentId: 1, id: 5, name: '子分类二' },
  { parentId: 2, id: 6, name: '子分类三' },
  { parentId: 3, id: 7, name: '子分类四' }
];

// 初始化父级下拉菜单
function initParentSelect() {
  const parentSelect = document.getElementById('parentSelect');
  parents.forEach(parent => {
    const option = document.createElement('option');
    option.value = parent.id;
    option.textContent = parent.name;
    parentSelect.appendChild(option);
  });
}

// 初始化子级下拉菜单
function initChildSelect(parentId) {
  const childSelect = document.getElementById('childSelect');
  childSelect.innerHTML = '<option value="">请选择</option>';
  children.forEach(child => {
    if (child.parentId === parentId) {
      const option = document.createElement('option');
      option.value = child.id;
      option.textContent = child.name;
      childSelect.appendChild(option);
    }
  });
}

initParentSelect(); // 初始化父级下拉菜单

步骤三：添加级联联动

最后，我们需要为父级下拉菜单添加一个事件监听器，当用户选择一个选项时，自动更新子级下拉菜单的选项。

document.getElementById('parentSelect').addEventListener('change', function() {
  const parentId = this.value;
  initChildSelect(parentId);
});

现在，当你选择一个父级分类时，子级下拉菜单会自动更新为对应的子级分类选项。

总结

通过以上步骤，我们已经成功实现了使用Bootstrap实现多选级联的下拉菜单。这个功能可以帮助用户更方便地选择分类，提高用户体验。希望这篇教程对你有所帮助！

-- 展开阅读全文 --