我有一个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);
}
1条答案
按热度按时间eeq64g8w1#
对于方案和剂量选择,您可以在Map和创建
Set
之前首先基于类型filter
。