正文

教你轻松搞定Bootstrap联动下拉框，一步到位实现数据同步！

/0 浏览量
0423

在网页设计中，联动下拉框是一个常见的功能，它可以让用户在做出选择时更加方便和直观。Bootstrap 作为最受欢迎的前端框架之一，提供了丰富的组件和工具来帮助开发者实现这一功能。本文将带你轻松搞定 Bootstrap 联动下拉框，并一步到位实现数据同步。

1. 准备工作

在开始之前，请确保你的项目中已经引入了 Bootstrap 的 CSS 和 JS 文件。以下是一个简单的引入示例：

<!-- 引入 Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

<!-- 引入 Bootstrap JS 和依赖的 Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

2. 创建基础下拉框

首先，我们需要创建两个基础的下拉框。一个用于选择省份，另一个用于选择城市。以下是 HTML 代码示例：

<div class="mb-3">
  <label for="province" class="form-label">省份</label>
  <select id="province" class="form-select">
    <option value="">请选择省份</option>
    <!-- 省份选项 -->
  </select>
</div>

<div class="mb-3">
  <label for="city" class="form-label">城市</label>
  <select id="city" class="form-select">
    <option value="">请选择城市</option>
    <!-- 城市选项 -->
  </select>
</div>

3. 编写 JavaScript 代码

接下来，我们需要编写 JavaScript 代码来实现联动效果。以下是实现联动下拉框的完整代码：

// 省份数据
const provinces = [
  { id: 1, name: '北京' },
  { id: 2, name: '上海' },
  // ... 其他省份
];

// 城市数据
const cities = {
  1: [
    { id: 11, name: '北京市' },
    // ... 其他城市
  ],
  2: [
    { id: 21, name: '上海市' },
    // ... 其他城市
  ],
  // ... 其他省份对应的城市
};

// 初始化省份下拉框
function initProvinces() {
  const provinceSelect = document.getElementById('province');
  provinces.forEach(province => {
    const option = document.createElement('option');
    option.value = province.id;
    option.textContent = province.name;
    provinceSelect.appendChild(option);
  });
}

// 初始化城市下拉框
function initCities(provinceId) {
  const citySelect = document.getElementById('city');
  citySelect.innerHTML = '<option value="">请选择城市</option>';
  const citiesList = cities[provinceId] || [];
  citiesList.forEach(city => {
    const option = document.createElement('option');
    option.value = city.id;
    option.textContent = city.name;
    citySelect.appendChild(option);
  });
}

// 监听省份下拉框变化
document.getElementById('province').addEventListener('change', function() {
  const provinceId = this.value;
  initCities(provinceId);
});

// 页面加载完毕后初始化省份下拉框
document.addEventListener('DOMContentLoaded', initProvinces);

4. 实现数据同步

为了实现联动下拉框的数据同步，我们需要在用户选择省份后，自动更新城市下拉框中的选项。在上面的代码中，我们已经实现了这一功能。当用户选择一个省份后，initCities 函数会被调用，并根据选择的省份 ID 来更新城市下拉框中的选项。

5. 总结

通过以上步骤，你就可以轻松地使用 Bootstrap 实现联动下拉框，并一步到位实现数据同步。在实际应用中，你可以根据自己的需求对代码进行修改和扩展。希望本文对你有所帮助！

-- 展开阅读全文 --