bootstrap省市区三级联动

对于Bootstrap省市区三级联动，你可以使用Bootstrap框架结合JavaScript来实现。以下是一个简单的示例：

HTML部分：

<div class="form-group">
  <label for="province">省份：</label>
  <select class="form-control" id="province">
    <option value="">请选择</option>
    <!-- 这里可以根据实际需要动态生成省份选项 -->
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="广东">广东</option>
  </select>
</div>

<div class="form-group">
  <label for="city">城市：</label>
  <select class="form-control" id="city">
    <option value="">请选择</option>
    <!-- 这里的选项会根据选择的省份动态生成 -->
  </select>
</div>

<div class="form-group">
  <label for="district">区县：</label>
  <select class="form-control" id="district">
    <option value="">请选择</option>
    <!-- 这里的选项会根据选择的城市动态生成 -->
  </select>
</div>

JavaScript部分：

$(document).ready(function() {
  // 省份数据
  var provinceData = [
    { name: '北京', cities: ['北京市'] },
    { name: '上海', cities: ['上海市'] },
    { name: '广东', cities: ['广州市', '深圳市', '东莞市'] }
    // 其他省份数据...
  ];

  // 城市数据
  var cityData = {
    '北京': ['北京市'],
    '上海': ['上海市'],
    '广东': ['广州市', '深圳市', '东莞市']
    // 其他省份城市数据...
  };

  // 初始化省份选项
  var provinceSelect = $('#province');
  for (var i = 0; i < provinceData.length; i++) {
    provinceSelect.append('<option value="' + provinceData[i].name + '">' + provinceData[i].name + '</option>');
  }

  // 省份选择改变时动态更新城市选项
  provinceSelect.change(function() {
    var selectedProvince = $(this).val();
    var citySelect = $('#city');
    var districtSelect = $('#district');

    // 清空城市和区县选项
    citySelect.empty();
    districtSelect.empty();

    // 根据选择的省份添加对应的城市选项
    if (selectedProvince) {
      var cities = cityData[selectedProvince];
      for (var j = 0; j < cities.length; j++) {
        citySelect.append('<option value="' + cities[j] + '">' + cities[j] + '</option>');
      }
    }
  });

  // 城市选择改变时动态更新区县选项
  $('#city').change(function() {
    var selectedCity = $(this).val();
    var districtSelect = $('#district');

    // 清空区县选项
    districtSelect.empty();

    // 根据选择的城市添加对应的区县选项
    // 可以根据实际情况使用Ajax请求获取区县数据
  });
});

请注意，这只是一个简单的示例，省份、城市和区县的数据可以根据实际情况进行修改和扩展。你可以根据自己的需求调整代码以适应你的项目。希望对你有所帮助！