什么是级联下拉菜单？

级联下拉菜单又称为多级联动下拉菜单或者多级联动菜单，是指多组下拉菜单，它们之间有着上下级或者父子关系，下一级菜单的内容将会受到上一级菜单的选项影响。

Bootstrap如何实现级联下拉菜单？

Bootstrap通过在li标签上添加data-*属性，将子级数据与父级数据进行关联，实现级联下拉菜单。

第一步：HTML文件中添加菜单结构

首先，我们需要在HTML文件中添加一个包含多组下拉菜单的菜单结构，例如：

<div class="form-group">
  <label for="province_select">Province</label>
  <select class="form-control" id="province_select">
    <option value="">Select Province</option>
    <option value="beijing">Beijing</option>
    <option value="shanghai">Shanghai</option>
    <option value="guangdong">Guangdong</option>
  </select>
</div>

<div class="form-group">
  <label for="city_select">City</label>
  <select class="form-control" id="city_select">
    <option value="">Select City</option>
  </select>
</div>

其中，第一个下拉菜单为父级菜单，第二个下拉菜单为子级菜单，它们之间的关系是：省份 -> 城市。要注意的是，子级菜单中的option标签都没有填写value属性，是因为子级菜单的选项都是动态生成的，不需要固定的值。

第二步：JS文件中添加事件监听

接下来，我们需要在JS文件中添加事件监听函数，监听父级下拉菜单的改变事件，根据选中的值动态生成对应的子级菜单。例如：

$('#province_select').change(function() {
  var province = $(this).val();
  if (province == '') {
    $('#city_select').html('<option value="">Select City</option>');
  } else {
    $.getJSON('/api/city/' + province, function(data) {
      var options = '<option value="">Select City</option>';
      for (var i = 0; i < data.length; i++) {
        options += '<option value="' + data[i] + '">' + data[i] + '</option>';
      }
      $('#city_select').html(options);
    });
  }
});

其中，我们使用jQuery的getJSON()方法向服务器请求子级菜单的数据，并将生成的HTML代码通过html()方法动态的插入到子级菜单中。

示例一：中国省市下拉菜单

下面，让我们通过一个具体的示例来进一步理解Bootstrap实现级联下拉菜单的方法。假设我们需要实现一个中国省市下拉菜单，我们可以先在HTML文件中添加菜单结构：

<div class="form-group">
  <label for="province_select">Province</label>
  <select class="form-control" id="province_select">
    <option value="">Select Province</option>
    <option value="beijing">Beijing</option>
    <option value="shanghai">Shanghai</option>
    <option value="guangdong">Guangdong</option>
  </select>
</div>

<div class="form-group">
  <label for="city_select">City</label>
  <select class="form-control" id="city_select">
    <option value="">Select City</option>
  </select>
</div>

然后，在JS文件中添加事件监听函数：

$('#province_select').change(function() {
  var province = $(this).val();
  if (province == '') {
    $('#city_select').html('<option value="">Select City</option>');
  } else {
    $.getJSON('/api/city/' + province, function(data) {
      var options = '<option value="">Select City</option>';
      for (var i = 0; i < data.length; i++) {
        options += '<option value="' + data[i] + '">' + data[i] + '</option>';
      }
      $('#city_select').html(options);
    });
  }
});

接着，在服务器端提供获取子级菜单数据的接口：

@app.route('/api/city/<province>')
def city(province):
    if province == 'beijing':
        return json.dumps(['Beijing', 'Changping', 'Shunyi'])
    elif province == 'shanghai':
        return json.dumps(['Shanghai', 'Pudong', 'Hongkou'])
    elif province == 'guangdong':
        return json.dumps(['Guangzhou', 'Shenzhen', 'Dongguan'])
    else:
        return json.dumps([])

这里我们假设服务器端使用Python的Flask框架，根据不同的省份返回不同的子级菜单数据。

最后，我们可以得到一个功能完善的中国省市级联下拉菜单，实现了上下级联动的效果。

示例二：商品分类级联下拉菜单

另一个常见的应用场景是商品分类级联下拉菜单。

例如，我们需要实现一个商品分类的三级联动菜单，其中第一级为大分类，第二级为中分类，第三级为小分类。我们可以在HTML文件中添加菜单结构：

<div class="form-group">
  <label for="category1_select">Category 1</label>
  <select class="form-control" id="category1_select">
    <option value="">Select Category 1</option>
    <option value="clothing">Clothing</option>
    <option value="electronics">Electronics</option>
    <option value="books">Books</option>
  </select>
</div>

<div class="form-group">
  <label for="category2_select">Category 2</label>
  <select class="form-control" id="category2_select">
    <option value="">Select Category 2</option>
  </select>
</div>

<div class="form-group">
  <label for="category3_select">Category 3</label>
  <select class="form-control" id="category3_select">
    <option value="">Select Category 3</option>
  </select>
</div>

然后，在JS文件中添加事件监听函数：

$('#category1_select').change(function() {
  var category1 = $(this).val();
  if (category1 == '') {
    $('#category2_select').html('<option value="">Select Category 2</option>');
  } else {
    $.getJSON('/api/category2/' + category1, function(data) {
      var options = '<option value="">Select Category 2</option>';
      for (var i = 0; i < data.length; i++) {
        options += '<option value="' + data[i]['id'] + '">' + data[i]['name'] + '</option>';
      }
      $('#category2_select').html(options);
      $('#category3_select').html('<option value="">Select Category 3</option>');
    });
  }
});

$('#category2_select').change(function() {
  var category2 = $(this).val();
  if (category2 == '') {
    $('#category3_select').html('<option value="">Select Category 3</option>');
  } else {
    $.getJSON('/api/category3/' + category2, function(data) {
      var options = '<option value="">Select Category 3</option>';
      for (var i = 0; i < data.length; i++) {
        options += '<option value="' + data[i]['id'] + '">' + data[i]['name'] + '</option>';
      }
      $('#category3_select').html(options);
    });
  }
});

同样，在服务器端提供获取子级菜单数据的接口：

@app.route('/api/category2/<category1>')
def category2(category1):
    if category1 == 'clothing':
        return json.dumps([
            {'id': 1, 'name': 'T-shirt'},
            {'id': 2, 'name': 'Shirt'},
            {'id': 3, 'name': 'Sweater'}
        ])
    elif category1 == 'electronics':
        return json.dumps([
            {'id': 4, 'name': 'Mobile Phone'},
            {'id': 5, 'name': 'Computer'},
            {'id': 6, 'name': 'Tablet'}
        ])
    elif category1 == 'books':
        return json.dumps([
            {'id': 7, 'name': 'Novel'},
            {'id': 8, 'name': 'Science Fiction'},
            {'id': 9, 'name': 'Biography'}
        ])
    else:
        return json.dumps([])


@app.route('/api/category3/<category2>')
def category3(category2):
    if category2 == '1':
        return json.dumps([
            {'id': 10, 'name': 'Round Neck'},
            {'id': 11, 'name': 'V-neck'},
            {'id': 12, 'name': 'Polo Shirt'}
        ])
    elif category2 == '2':
        return json.dumps([
            {'id': 13, 'name': 'Long Sleeve'},
            {'id': 14, 'name': 'Short Sleeve'},
            {'id': 15, 'name': 'Denim Shirt'}
        ])
    elif category2 == '3':
        return json.dumps([
            {'id': 16, 'name': 'Crew Neck'},
            {'id': 17, 'name': 'Zip Hoodie'},
            {'id': 18, 'name': 'Cardigan'}
        ])
    elif category2 == '4':
        return json.dumps([
            {'id': 19, 'name': 'Smart Phone'},
            {'id': 20, 'name': 'Flip Phone'}
        ])
    elif category2 == '5':
        return json.dumps([
            {'id': 21, 'name': 'Desktop Computer'},
            {'id': 22, 'name': 'Laptop'},
            {'id': 23, 'name': 'Server'}
        ])
    elif category2 == '6':
        return json.dumps([
            {'id': 24, 'name': 'Android Tablet'},
            {'id': 25, 'name': 'iPad'}
        ])
    elif category2 == '7':
        return json.dumps([
            {'id': 26, 'name': 'Mystery'},
            {'id': 27, 'name': 'Thriller'},
            {'id': 28, 'name': 'Romance'}
        ])
    elif category2 == '8':
        return json.dumps([
            {'id': 29, 'name': 'Space Opera'},
            {'id': 30, 'name': 'Cyberpunk'},
            {'id': 31, 'name': 'Hard Science Fiction'}
        ])
    elif category2 == '9':
        return json.dumps([
            {'id': 32, 'name': 'Autobiography'},
            {'id': 33, 'name': 'Memoir'},
            {'id': 34, 'name': 'History'}
        ])
    else:
        return json.dumps([])

到此为止，我们已经实现了一个功能完善的三级级联下拉菜单，可以根据选项的选择动态生成对应项的下拉菜单。

以上就是Bootstrap每天必学之级联下拉菜单的完整攻略，希望您理解并掌握了这个实现方法。