正文

新手必看！轻松实现Bootstrap二级联动回显，告别繁琐代码

/0 浏览量
0528

在网页开发中，实现下拉菜单的二级联动回显是一个常见的需求。Bootstrap框架提供了丰富的组件和工具，可以帮助我们轻松实现这一功能。本文将详细介绍如何使用Bootstrap和JavaScript实现二级联动回显，让你告别繁琐的代码。

一、准备工作

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

二、HTML结构

首先，我们需要创建两个下拉菜单，分别对应一级和二级联动。以下是HTML结构的示例：

<div class="container mt-5">
  <div class="row">
    <div class="col-md-6">
      <label for="province">省份</label>
      <select class="form-select" id="province" onchange="loadCities()">
        <option value="">请选择省份</option>
        <!-- 省份选项 -->
      </select>
    </div>
    <div class="col-md-6">
      <label for="city">城市</label>
      <select class="form-select" id="city">
        <option value="">请选择城市</option>
        <!-- 城市选项 -->
      </select>
    </div>
  </div>
</div>

三、JavaScript实现

接下来，我们需要使用JavaScript来处理联动效果。以下是实现二级联动的JavaScript代码：

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

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

// 加载省份
function loadProvinces() {
  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 loadCities() {
  const provinceId = document.getElementById('province').value;
  const citySelect = document.getElementById('city');
  citySelect.innerHTML = '<option value="">请选择城市</option>';
  if (provinceId) {
    const cityList = cities[provinceId];
    if (cityList) {
      cityList.forEach((city) => {
        const option = document.createElement('option');
        option.value = city.id;
        option.textContent = city.name;
        citySelect.appendChild(option);
      });
    }
  }
}

// 初始化页面
function init() {
  loadProvinces();
}

init();

四、总结

通过以上步骤，我们成功实现了Bootstrap二级联动回显功能。在实际应用中，你可以根据需要修改省份和城市的数据，以适应不同的场景。使用Bootstrap和JavaScript实现联动效果，可以大大提高开发效率，让你告别繁琐的代码。

-- 展开阅读全文 --