JavaScript实现JSON驱动的三级联动去重下拉框

问题背景 #

现有包含ID、肿瘤类型（Tumor_type）、治疗方案（Regimen）、剂量（Dose）的JSON数据，需要创建三个下拉列表：

• 三个下拉框均需展示唯一值（过滤重复项）
• 治疗方案下拉框需根据选中的肿瘤类型动态更新，仅显示对应肿瘤的可用方案
• 剂量下拉框需根据选中的治疗方案和肿瘤类型动态更新，仅显示对应组合的可用剂量

目前已完成肿瘤类型下拉框的唯一值填充，需实现后续联动逻辑。

完整实现代码 #

<select id="tumor_type" onchange="tumor_type_change()">
  <option value="0">SELECT tumor type</option>
</select>
<select id="regimen" onchange="regimen_change()">
  <option value="0">SELECT regimen</option>
</select>
<select id="dose" onchange="dose_change()">
  <option value="0">SELECT dose</option>
</select>

<script>
const data= [
  {
    "ID": "1", 
    "Tumor_type": "crc",
    "Regimen": "CAPOX",
    "Dose": "high"
  },
  {
    "ID": "2", 
    "Tumor_type": "crc",
    "Regimen": "CAPOX",
    "Dose": "low"
  },
  {
    "ID": "3",  
    "Tumor_type": "crc",
    "Regimen": "FOLFOX",
    "Dose": "high"
  },
  {
    "ID": "4", 
    "Tumor_type": "crc",
    "Regimen": "FOLFOX",
    "Dose": "low"
  },
  {
    "ID": "5", 
    "Tumor_type": "Gastric",
    "Regimen": "FOLFOX",
    "Dose": "high"
  },
  {
    "ID": "6", 
    "Tumor_type": "Gastric",
    "Regimen": "FOLFOX",
    "Dose": "low"
  },
  {
    "ID": "7", 
    "Tumor_type": "Gastric",
    "Regimen": "FOLFIRI",
    "Dose": "high"
  },
  {
    "ID": "8", 
    "Tumor_type": "Gastric",
    "Regimen": "FOLFIRI",
    "Dose": "low"
  }
]

// 初始化肿瘤类型下拉框
let dropdown1 = document.getElementById('tumor_type');
dropdown1.length = 0;

let defaultOption1 = document.createElement('option');
defaultOption1.text = 'Select tumor type';
defaultOption1.value = '0';

dropdown1.add(defaultOption1);
dropdown1.selectedIndex = 0;

// 获取唯一肿瘤类型并填充
const uniqueTumorTypes = Array.from(new Set(data.map(item => item.Tumor_type)));
uniqueTumorTypes.forEach(type => {
  const option = document.createElement('option');
  option.text = type;
  option.value = type; // 修复原代码中value设置错误的问题
  dropdown1.add(option);
});

// 通用下拉框填充函数
function populateDropdown(dropdownElement, options, defaultText = 'Select option') {
  // 清空原有选项
  dropdownElement.length = 0;
  // 添加默认选项
  const defaultOption = document.createElement('option');
  defaultOption.text = defaultText;
  defaultOption.value = '0';
  dropdownElement.add(defaultOption);
  // 添加过滤后的唯一选项
  options.forEach(opt => {
    const option = document.createElement('option');
    option.text = opt;
    option.value = opt;
    dropdownElement.add(option);
  });
}

// 肿瘤类型变化时更新治疗方案下拉框
function tumor_type_change() {
  const selectedTumor = document.getElementById('tumor_type').value;
  const regimenDropdown = document.getElementById('regimen');
  const doseDropdown = document.getElementById('dose');

  if (selectedTumor === '0') {
    // 未选中肿瘤类型时，重置后两个下拉框
    populateDropdown(regimenDropdown, [], 'SELECT regimen');
    populateDropdown(doseDropdown, [], 'SELECT dose');
    return;
  }

  // 筛选当前肿瘤对应的所有治疗方案，去重
  const applicableRegimens = Array.from(new Set(
    data.filter(item => item.Tumor_type === selectedTumor).map(item => item.Regimen)
  ));
  populateDropdown(regimenDropdown, applicableRegimens, 'SELECT regimen');
  // 重置剂量下拉框
  populateDropdown(doseDropdown, [], 'SELECT dose');
}

// 治疗方案变化时更新剂量下拉框
function regimen_change() {
  const selectedTumor = document.getElementById('tumor_type').value;
  const selectedRegimen = document.getElementById('regimen').value;
  const doseDropdown = document.getElementById('dose');

  if (selectedTumor === '0' || selectedRegimen === '0') {
    populateDropdown(doseDropdown, [], 'SELECT dose');
    return;
  }

  // 筛选当前肿瘤+治疗方案对应的所有剂量，去重
  const applicableDoses = Array.from(new Set(
    data.filter(item => item.Tumor_type === selectedTumor && item.Regimen === selectedRegimen).map(item => item.Dose)
  ));
  populateDropdown(doseDropdown, applicableDoses, 'SELECT dose');
}

// 剂量变化的回调函数（可根据需求扩展）
function dose_change() {
  const selectedDose = document.getElementById('dose').value;
  // 这里可以添加剂量选中后的逻辑，比如提交数据等
}
</script>

关键实现说明 #

1. 修复初始下拉框问题：原代码中肿瘤类型选项的value设置错误（data1[i].i是无效值），改为直接使用肿瘤类型字符串作为value，确保后续筛选能正确匹配。
2. 通用填充函数：封装populateDropdown函数，统一处理下拉框的清空、默认选项添加和唯一选项填充，减少重复代码。
3. 肿瘤类型联动逻辑：
   • 选中肿瘤类型后，先筛选出该肿瘤对应的所有治疗方案，通过Set去重后填充到治疗方案下拉框
   • 同时重置剂量下拉框，避免显示不符合当前肿瘤的剂量
4. 治疗方案联动逻辑：
   • 结合选中的肿瘤类型和治疗方案，筛选出对应的剂量选项，去重后填充到剂量下拉框
   • 若未选中肿瘤或治疗方案，重置剂量下拉框

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