JavaScript实现依赖年份输入与国家选择的联动下拉列表

核心逻辑说明 #

第二个下拉框的选项渲染只需要在两个依赖项（选中年份、选中国家）的值发生变化时触发，基于已有的嵌套对象数据结构，不需要额外改造数据格式，只需要补全对应映射、写好渲染逻辑和事件绑定即可。 #

具体实现步骤 #

1. 补全联动数据源 #

沿用已有的yearsFilterDataList结构，一级键为年份字符串，二级键为第一个国家下拉框的选项value，二级对象内存放当前年份+国家组合下的所有可选项，和你给出的示例结构完全匹配：

const yearsFilterDataList = {
  "1918": {
    "0": { // 对应Sweden
      "": "Choose model",
      "volvo": "Volvo",
      "saab": "Saab"
    },
    "1": { // 对应Germany
      "": "Choose model",
      "mercedes": "Mercedes",
      "bmw": "BMW"
    },
    "2": { // 对应USA
      "": "Choose model",
      "ford": "Ford",
      "cadillac": "Cadillac"
    }
  },
  "1936": {
    "0": {
      "": "Choose model",
      "volvo-pv51": "Volvo PV51",
      "saab-92-proto": "Saab 92 Prototype"
    },
    "1": {
      "": "Choose model",
      "mercedes-170v": "Mercedes 170V",
      "vw-beetle-proto": "VW Beetle Prototype"
    },
    "2": {
      "": "Choose model",
      "ford-v8": "Ford V8",
      "chevrolet-standard": "Chevrolet Standard"
    }
  },
  "1950": {
    "0": {
      "": "Choose model",
      "volvo-pv444": "Volvo PV444",
      "saab-92-prod": "Saab 92 Production"
    },
    "1": {
      "": "Choose model",
      "mercedes-300sl-proto": "Mercedes 300SL Prototype",
      "vw-beetle-prod": "VW Beetle Production"
    },
    "2": {
      "": "Choose model",
      "ford-custom": "Ford Custom Deluxe",
      "chevrolet-belair": "Chevrolet Bel Air"
    }
  },
  "1981": {
    "0": {
      "": "Choose model",
      "volvo-240": "Volvo 240",
      "saab-900": "Saab 900"
    },
    "1": {
      "": "Choose model",
      "mercedes-w126": "Mercedes S-Class W126",
      "bmw-e30": "BMW 3-Series E30"
    },
    "2": {
      "": "Choose model",
      "ford-mustang-gen3": "Ford Mustang Gen3",
      "chevrolet-camaro-gen3": "Chevrolet Camaro Gen3"
    }
  }
}

2. 编写公共渲染函数 #

不需要硬编码年份和滑块值的映射，直接从已有的datalist读取对应年份，再写核心的下拉框重渲染方法：

// 根据range滑块当前值获取选中年份
function getCurrentSelectedYear() {
  const rangeInput = document.getElementById('yearRange')
  const yearDatalist = document.getElementById('yearsDatalist')
  const targetOption = yearDatalist.querySelector(`option[value="${rangeInput.value}"]`)
  return targetOption ? targetOption.label : ''
}

// 重渲染第二个下拉框的所有选项
function updateItemSelectOptions() {
  const currentYear = getCurrentSelectedYear()
  const currentCountryVal = document.getElementById('countrySelect').value
  const itemSelect = document.getElementById('itemSelection')
  // 清空原有选项
  itemSelect.innerHTML = ''

  // 容错处理：无对应配置时渲染提示
  if (!yearsFilterDataList[currentYear] || !yearsFilterDataList[currentYear][currentCountryVal]) {
    const emptyOption = document.createElement('option')
    emptyOption.value = ''
    emptyOption.disabled = true
    emptyOption.selected = true
    emptyOption.textContent = 'No available options for current selection'
    itemSelect.appendChild(emptyOption)
    return
  }

  // 遍历配置生成选项
  const optionMap = yearsFilterDataList[currentYear][currentCountryVal]
  Object.entries(optionMap).forEach(([optionVal, optionText]) => {
    const newOption = document.createElement('option')
    newOption.value = optionVal
    newOption.textContent = optionText
    if (optionVal === '') newOption.selected = true
    itemSelect.appendChild(newOption)
  })
}

3. 绑定触发事件 #

所有会改变两个依赖项的操作，都需要触发一次选项重渲染：

1. 页面首次加载完成后，初始化渲染默认选项
2. 年份range滑块值变化时，直接在你已经写好的changeYear、changeYearLite回调里调用渲染函数即可，不需要额外绑定事件
3. 国家下拉框选中值变化时，绑定change事件触发重渲染

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
  // 给国家下拉框绑定变更事件
  document.getElementById('countrySelect').addEventListener('change', updateItemSelectOptions)
  // 首次渲染默认选项
  updateItemSelectOptions()
})

// 在你已有的滑块回调里加一行渲染调用即可
function changeYear(value) {
  // 保留你原有的业务逻辑
  updateItemSelectOptions()
}
function changeYearLite(value) {
  // 保留你原有的业务逻辑
  updateItemSelectOptions()
}

优化提示 #

• 年份映射直接从datalist读取，后续调整年份范围、新增年份选项时，只需要修改datalist和对应数据源，不需要改动逻辑代码
• 如果需要保留用户之前在第二个下拉框选中的值，可以在渲染前先暂存当前value，渲染完成后如果新选项列表包含该值就自动选中，不存在则默认选中第一个提示项
• 如果你需要给选项加分组，可以把二级结构改成optgroup格式，渲染时对应生成<optgroup>标签即可，核心联动逻辑不需要改动

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