如何使用JavaScript实现汽车年份、品牌、车型级联下拉框赋值

实现思路 #

级联联动的核心逻辑非常简单：监听年份、品牌下拉框的选择事件，当两个值都确认后，过滤原始的car_arrays数组，匹配出同时符合选中年份、选中品牌的条目，提取车型去重后填充到车型下拉框即可。

代码实现 #

第一步：编写页面下拉框结构 #

<select id="yearid" disabled>
  <option value="">请选择年份</option>
</select>
<select id="makeid" disabled>
  <option value="">请选择品牌</option>
</select>
<select id="modelid" disabled>
  <option value="">请选择车型</option>
</select>

第二步：完善JS逻辑 #

你原有的初始化逻辑存在冗余，下面是整理后的完整可运行代码：

// 此处保留你原来定义的 car_arrays、year、make 三个变量
function updateModels(selectedYear, selectedMake) {
  const modelSelect = document.getElementById('modelid');
  // 清空旧选项
  modelSelect.innerHTML = '<option value="">请选择车型</option>';
  // 过滤匹配年份和品牌的车辆数据
  const matchedList = car_arrays.filter(item => {
    return item.year === Number(selectedYear) && item.make === selectedMake
  });
  // 车型去重
  const modelList = [...new Set(matchedList.map(item => item.model))];
  // 填充新选项
  modelList.forEach(model => {
    const option = document.createElement('option');
    option.value = option.text = model;
    modelSelect.add(option);
  });
  // 无匹配车型时保持禁用，否则启用下拉框
  modelList.length ? modelSelect.removeAttribute('disabled') : modelSelect.setAttribute('disabled', true);
}

// 页面加载完成后初始化组件
window.onload = function() {
  const yearSelect = document.getElementById('yearid');
  const makeSelect = document.getElementById('makeid');
  
  // 初始化年份下拉框
  year.forEach(y => {
    const option = document.createElement('option');
    option.value = option.text = y;
    yearSelect.add(option);
  });
  yearSelect.removeAttribute('disabled');

  // 年份切换事件
  yearSelect.addEventListener('change', function() {
    // 切换年份后清空已选的品牌、车型
    makeSelect.innerHTML = '<option value="">请选择品牌</option>';
    const modelSelect = document.getElementById('modelid');
    modelSelect.innerHTML = '<option value="">请选择车型</option>';
    modelSelect.setAttribute('disabled', true);

    if (!this.value) {
      makeSelect.setAttribute('disabled', true);
      return;
    }
    // 若需要只显示当前年份有对应车型的品牌，使用下面的动态过滤逻辑
    const matchedMakes = [...new Set(car_arrays.filter(item => item.year === Number(this.value)).map(item => item.make))];
    matchedMakes.forEach(m => {
      const option = document.createElement('option');
      option.value = option.text = m;
      makeSelect.add(option);
    });
    // 若不需要过滤品牌，注释上面4行代码，替换为遍历全量make数组的逻辑即可
    makeSelect.removeAttribute('disabled');
  });

  // 品牌切换事件
  makeSelect.addEventListener('change', function() {
    const modelSelect = document.getElementById('modelid');
    if (!this.value || !yearSelect.value) {
      modelSelect.setAttribute('disabled', true);
      return;
    }
    // 更新车型下拉框
    updateModels(yearSelect.value, this.value);
  });
}

注意事项 #

• 你原来定义的car_arrays、year、make三个变量要放在全局作用域，或者放在上述代码可访问的位置
• 如果需要兼容IE等老旧浏览器，把Set相关的去重逻辑换成普通数组遍历去重即可
• 如果不需要根据年份过滤可选品牌，直接遍历你提前准备好的全量make数组填充品牌下拉框即可

内容的提问来源于stack exchange，提问作者haks interlance