如何使用JSON和Ajax在另一个select的基础上填充select

Question

我想在select选项上循环JSON文件中的值，这是我的JSON文件外观

[{
"vehicle": "car1",
"type": [
{"name" : "BMW",
"details" : [{
"color" : "red",
"price" : "50000"
},
{
"color" : "blue",
"price" : "51000"
}]}
]},
{
"vehicle": "car2",
"type": [
{"name" : "Lambo",
"details" : [{
"color" : "green",
"price" : "150000"
},
{
"color" : "yellow",
"price" : "151000"
}]}
]}
]

我想填充2 select中的值，这是我的代码，我为使用循环

for (i = 0; i < data.length; i++) {
select1.insertAdjacentHTML('beforeend', `
<option>${data[i].vehicle}</option>
`)
for (j = 0; j < data[i].type.length; j++) {

for (k = 0; k < data[i].type[j].details.length; k++) {

select2.insertAdjacentHTML('beforeend', `
<option">${data[j].type[j].details[k].color}</option>
`)
}
}

}

我的目标是我的第一个选择：

• car1
• car2

并且第二个选择选项是：

• 红色/绿色
• 蓝色/黄色

基于第一个选择，所以如果我选择汽车1，并且在选择2中只显示红色和蓝色，在我的代码中，select2显示了4个项目，

有人能帮我吗？谢谢

var json_obj =  [{
"vehicle": "car1",
"type": [
{"name" : "BMW",
"details" : [{
"color" : "red",
"price" : "50000"
},
{
"color" : "blue",
"price" : "51000"
}]}
]},
{
"vehicle": "car2",
"type": [
{"name" : "Lambo",
"details" : [{
"color" : "green",
"price" : "150000"
},
{
"color" : "yellow",
"price" : "151000"
}]}
]}
];

function apply_change(data) {
var select1 = document.getElementById('select1');
var select2 = document.getElementById('select2');
for (i = 0; i < data.length; i++) {
select1.insertAdjacentHTML('beforeend', `
<option>${data[i].vehicle}</option>
`)

for (j = 0; j < data[i].type.length; j++) {

for (k = 0; k < data[i].type[j].details.length; k++) {

select2.insertAdjacentHTML('beforeend', `
<option">${data[j].type[j].details[k].color}</option>
`)
}
}
}
}
apply_change(json_obj);

select 1: <select id="select1"></select>
select 2: <select id="select2"></select>

Answer 1

编辑您的代码以提供所需的输出，您也可以查看我的jsfiddle解决方案。选择onchange-纯javascript

var json_obj =  [{
"vehicle": "car1",
"type": [
{"name" : "BMW",
"details" : [{
"color" : "red",
"price" : "50000"
},
{
"color" : "blue",
"price" : "51000"
}]}
]},
{
"vehicle": "car2",
"type": [
{"name" : "Lambo",
"details" : [{
"color" : "green",
"price" : "150000"
},
{
"color" : "yellow",
"price" : "151000"
}]}
]}
];

var select1 = document.getElementById('select1');
var select2 = document.getElementById('select2');
LoadSelect1();
function LoadSelect1() {
for (i = 0; i < json_obj.length; i++) {
select1.options.add(new Option(json_obj[i].vehicle, json_obj[i].vehicle));
}
LoadSelect2(json_obj[0].vehicle);
}
function LoadSelect2(selectedvalue) {
console.log(selectedvalue);
select2.options.length = 0;
for (i = 0; i < json_obj.length; i++) {
if (json_obj[i].vehicle == selectedvalue) {
for (j = 0; j < json_obj[i].type.length; j++) {
for (k = 0; k < json_obj[i].type[j].details.length; k++) {
select2.options.add(new Option(json_obj[i].type[j].details[k].color, json_obj[i].type[j].details[k].color));
}
}
}
}
}

select 1: <select id="select1" onchange="LoadSelect2(this.value)"></select>
select 2: <select id="select2"></select>