如何根据用户对第一个下拉列表的选择从JSON文件中填充下拉列表并在JavaScript中过滤重复项

gj3fmq9x  于 2023-07-01  发布在  Java
关注(0)|答案(1)|浏览(103)

我有一个JSON数据文件,有4个变量:ID、肿瘤类型、治疗方案和剂量。
使用这些数据,我想创建3个下拉列表,用户可以在其中选择肿瘤类型,方案和剂量,从json文件中填充。
相同的肿瘤类型和治疗方案出现多次,因此需要过滤下拉列表以仅显示唯一项目。
最后,方案和剂量下拉列表需要根据用户在第一个(tumor_type)下拉列表中选择的内容进行动态更新。例如,如果选择了tumor_type CRC,则仅应显示适用于CRC的方案。
到目前为止,我只设法用唯一值填充了第一个下拉菜单tumor_type。
任何帮助感激地接受。谢谢
Jsfiddle也在这里:https://jsfiddle.net/rgqxn0t4/2/

<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>

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';

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

  let dropdown2 = document.getElementById('regimen');

  let dropdown3 = document.getElementById('dose');
  

        let option1;

        let data1 = Array.from(new Set(data.map(({ Tumor_type }) => Tumor_type))); 
        
        for (let i = 0; i < data1.length; i++) {
          option1 = document.createElement('option');
          option1.text = data1[i];
          option1.value = data1[i].i;
          dropdown1.add(option1);
        }
eeq64g8w

eeq64g8w1#

对于方案和剂量选择,您可以在Map和创建Set之前首先基于类型filter

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"}];
const dropdown1 = document.getElementById('tumor_type');
const dropdown2 = document.getElementById('regimen');
const dropdown3 = document.getElementById('dose');
for (const t of new Set(data.map(x => x.Tumor_type)))
    dropdown1.add(new Option(t));
dropdown1.addEventListener('change', e => {
    const type = dropdown1.value;
    dropdown2.replaceChildren();
    for (const r of new Set(data.filter(x => x.Tumor_type === type).map(x => x.Regimen)))
        dropdown2.add(new Option(r));
    dropdown3.replaceChildren();
    for (const d of new Set(data.filter(x => x.Tumor_type === type).map(x => x.Dose)))
        dropdown3.add(new Option(d));
});
<select id="tumor_type">
  <option value="0">SELECT tumor type</option>
</select>
<select id="regimen">
  <option value="0">SELECT regimen</option>
</select>
<select id="dose">
  <option value="0">SELECT dose</option>
</select>

相关问题