展开对象以创建嵌套的条件下拉列表

Question

我有一些javascript，可以根据上一个下拉列表的选择显示下拉列表。现在，对象有两种类型(汽车品牌(，选择后将显示与各自汽车品牌相关的车型。

然而，我需要将其进一步扩展一个级别，以便选择，例如；奥迪>r8〃；将显示选项X、Y和Z，同时选择"；奥迪>a4"；将在第三个下拉列表(当前为空(中显示选项L、M和N。这是我的代码演示。

var data = {
"audi": ["a4","a5","r8"],
"volkswagen": ["Bug","Jetta","Golf"]
};
var make = document.querySelector("#cars");
var model = document.querySelector("#model");
var software = document.querySelector("#software");
var link = document.querySelector("#link");
make.addEventListener("change",function(){
if(make.value != ""){
var models = data[make.value];
var length = model.options.length;
for (i = length-1; i >= 0; i--) {model.options[i] = null;}
link.innerHTML = "";

let opt = document.createElement("option");
opt.text = "Select " + make.value + " Model";
opt.value = "";
model.appendChild(opt);

models.forEach(function(k,v){
let opt = document.createElement("option");
opt.text = k;
opt.value = k;
model.appendChild(opt);
});
}
});
model.addEventListener("change",function(){
if(model.value != ""){
link.innerHTML = '<a href="www.car.com/' + make.value + '/' + model.value + '"</a>' + '<h4>' + make.value + '/' + model.value + '</h4>';
}
});

<form>
<select name="cars" id="cars">
<option value="" disabled selected>Select your Car</option>
<option value="audi">Audi</option>
<option value="volkswagen">Volkswagen</option>
</select>
<select name="model" id="model"></select>
<select name="software" id="software"></select>
</form>
<div id="link">

</div>

我的问题是，由于我不熟悉JS对象，我无法在数组中为汽车模型添加额外的元素。如何在每个车型的数据变量中成功嵌入另一个对象，并将其显示在下拉列表中？

Answer 1

您可以将列表更改为对象，以便在其中包含列表。像这样：

const data = {
audi: {
a4: ["L", "M", "N"],
a5: ["L", "M", "N"],
r8: ["L", "M", "N"],
},
volkswagen: {
Bug: ["L", "M", "N"],
Jetta: ["L", "M", "S"],
Golf: ["L", "M", "N"],
}
};

我将变量更改为常量，因为我在代码中看不到对它的重新分配(我在代码的其余部分也对其他变量进行了重新分配(。

考虑到这种结构，您的代码可能看起来像这样：

const make = document.querySelector("#cars");
const model = document.querySelector("#model");
const software = document.querySelector("#software");
const link = document.querySelector("#link");
function clearChildren(element) {
while (element.firstChild) {
element.removeChild(element.firstChild);
}
}
make.addEventListener("change", function () {
if (make.value != "") {
const models = data[make.value];
clearChildren(model);
clearChildren(software);
link.innerHTML = "";
const opt = document.createElement("option");
opt.text = "Select " + make.value + " Model";
opt.value = "";
model.appendChild(opt);
Object.keys(models).forEach(k => {
const opt = document.createElement("option");
opt.text = k;
opt.value = k;
model.appendChild(opt);
});
}
});
model.addEventListener("change", function () {
if (model.value != "") {
const options = data[make.value][model.value];
clearChildren(software);
link.innerHTML = "";
const opt = document.createElement("option");
opt.text = "Select the software for" + model.value;
opt.value = "";
software.appendChild(opt);

options.forEach(k => {
const opt = document.createElement("option");
opt.text = k;
opt.value = k;
software.appendChild(opt);
});
}
});

software.addEventListener("change", function () {
if (model.value != "") {
// I don't know how to format the link here
}
});

我还将您的一些匿名函数更改为箭头语法，我这样做只是因为我认为它们看起来更好。

Answer 2

有不同的方法可以做到这一点，但这是我第一次想到的方法。您可以通过将数组转换为对象来扩展当前数据对象，然后将键用作Makes，并将该对象的值用作最终值的数组，例如：

var data = {
"audi": {
"a4": ['x', 'y', 'z'],
"a5": ['x', 'y', 'z'],
"r8": ['x', 'y', 'z']
},
"volkswagen": {
"Bug": ['x', 'y', 'z'],
"Jetta": ['x', 'y', 'z'],
"Golf": ['x', 'y', 'z']
}
};

然后，您必须调整访问模型的方式，而不是：

var models = data[make.value]

您可以通过以下方式访问模型：

var models = Object.keys(data[make.value])

然后访问软件阵列：

var softwares = data[make.value][model.value]

然后，您可以在模型更改事件监听器中实现您在makechange事件监听器中使用的类似代码，以调整所需的新选项。最后，我猜您还需要添加一个软件更改事件侦听器。