HTML下拉框、二级联动 select多级联动

HTML下拉框（Select Box）是一种常见的表单元素，用于让用户从预设选项中选择一个值。基本的下拉框只有一个层级，即一级联动。当用户选择了一个选项后，下拉列表不会进一步动态更新。

而“二级联动”或“多级联动”的Select通常指的是在一个下拉框中，当你选择了一个选项后，另一个下拉框的内容会基于前一个选项的值进行填充。这种交互常用于数据关联或者层级选择场景，比如地区选择时，先选择省级，再根据省级显示对应的市级选项。在JavaScript或jQuery等前端库的支持下，通过监听select的变化事件并操作DOM来实现多级联动效果。

例如，在JavaScript中，可以这样做：

// 假设有两个下拉框
var provinceSelect = document.getElementById('province');
var citySelect = document.getElementById('city');

provinceSelect.addEventListener('change', function() {
  var selectedProvince = this.value;
  // 清空城市下拉框
  citySelect.innerHTML = '';
  // 根据省份加载对应的城市
  citiesForProvince(selectedProvince).forEach(city => {
    var option = document.createElement('option');
    option.value = city.id;
    option.text = city.name;
    citySelect.appendChild(option);
  });
});