js下拉框选择筛选数据数据联动

A：在前端开发中，通常使用下拉框（select）来选择筛选数据，而且有时候需要实现多级下拉框联动的功能，比如选择省份后再选择城市，选择城市后再选择区县等。

实现多级下拉框联动需要涉及到以下几个步骤：

1. 根据第一个下拉框的值筛选对应的数据。

2. 将筛选出来的数据作为第二个下拉框的选项。

3. 监听第一个下拉框的变化，当其值改变时重新筛选数据并更新第二个下拉框的选项。

4. 重复以上步骤，实现多级下拉框联动功能。

下面是一个简单的实现示例：

HTML代码：

<select id="province">
  <option value="">请选择省份</option>
  <option value="北京">北京</option>
  <option value="上海">上海</option>
  <option value="广东">广东</option>
</select>
<select id="city">
  <option value="">请选择城市</option>
</select>

JS代码：

var cityData = {
  '北京': ['东城区', '西城区', '朝阳区'],
  '上海': ['黄浦区', '徐汇区', '长宁区'],
  '广东': ['广州市', '深圳市', '珠海市']
};

var provinceSelect = document.getElementById('province');
var citySelect = document.getElementById('city');

provinceSelect.addEventListener('change', function() {
  var province = provinceSelect.value;
  var cities = cityData[province];

  // 清空第二个下拉框的选项并添加新的选项
  citySelect.innerHTML = '<option value="">请选择城市</option>';
  cities.forEach(function(city) {
    var option = document.createElement('option');
    option.value = city;
    option.textContent = city;
    citySelect.appendChild(option);
  });
});

在上面的示例中，我们定义了一个cityData对象，这里只是做了简单的演示，实际应用中需要根据实际情况进行修改。我们监听第一个下拉框的变化事件，当值改变时根据对应的省份筛选出城市数据，并将它们添加到第二个下拉框中。

这样就完成了一个简单的多级下拉框联动功能。