我是 JavaScript 的初学者，我正在尝试使用下拉菜单过滤一系列车辆，第一个过滤器按品牌名称显示，然后第二个过滤器按车辆类型显示。 过滤器似乎工作得很好，但是当我选择一个品牌，然后选择一个类型时，它会显示使用类型过滤器的所有项目数组，并忽略品牌过滤器
数组:
const Data = [
{
brand: "Volkswagen",
type: "Car",
model: "Golf",
year: "2019",
price: "$12,000",
},
{
brand: "Volkswagen",
type: "Truck",
model: "Tiguan",
year: "2020",
price: "$20,000",
},
{
brand: "Mazda",
type: "Car",
model: "Mazda 3",
year: "2022",
price: "$32,000",
},
{
brand: "Mazda",
type: "Truck",
model: "Mazda 6",
year: "2021",
price: "$29,000",
},
{
brand: "Tesla",
type: "Car",
model: "Model S",
year: "2023",
price: "$42,000",
},
{
brand: "Tesla",
type: "Truck",
model: "Model X",
year: "2020",
price: "$50,000",
},
];
功能:
const getSelectedValue = () => {
let brandSelection = document.getElementById("brandDropdown").value;
let selection = document.getElementById("dropDownSelection");
// show all cars
if (brandSelection === "All") {
selection.innerHTML = "";
Data.forEach((car) => {
selection.innerHTML += `<div class="car">
<h3>${car.brand}</h3>
<p>${car.type}</p>
<p>${car.model}</p>
<p>${car.year}</p>
<p>${car.price}</p>
</div>`;
});
}
// show selected brand
else {
selection.innerHTML = "";
Data.forEach((car) => {
if (car.brand === brandSelection) {
selection.innerHTML += `<div class="car">
<h3>${car.brand}</h3>
<p>${car.type}</p>
<p>${car.model}</p>
<p>${car.year}</p>
<p>${car.price}</p>
</div>`;
}
});
}
console.log(brandSelection);
};
// filter by type when brand is selected
const getSelectedType = () => {
let typeSelection = document.getElementById("typeDropdown").value;
let selection = document.getElementById("dropDownSelection");
// show all cars
if (typeSelection === "All") {
selection.innerHTML = "";
Data.forEach((car) => {
selection.innerHTML += `<div class="car">
<h3>${car.brand}</h3>
<p>${car.type}</p>
<p>${car.model}</p>
<p>${car.year}</p>
<p>${car.price}</p>
</div>`;
});
}
// show selected type
else {
selection.innerHTML = "";
Data.forEach((car) => {
if (car.type === typeSelection) {
selection.innerHTML += `<div class="car">
<h3>${car.brand}</h3>
<p>${car.type}</p>
<p>${car.model}</p>
<p>${car.year}</p>
<p>${car.price}</p>
</div>`;
}
});
}
console.log(typeSelection);
};
HTML:
<body>
<div class="dropDown">
<div class="Brand">
<select name="" id="brandDropdown" onchange="getSelectedValue()">
<option value="All">All</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Mazda">Mazda</option>
<option value="Tesla">Tesla</option>
</select>
</div>
<div class="Type">
<select name="" id="typeDropdown" onchange="getSelectedType()">
<option value="">Type</option>
<option value="All">All</option>
<option value="Car">Car</option>
<option value="Truck">Truck</option>
</select>
</div>
</div>
<div class="" id="dropDownSelection">
</div>
</body>
最佳答案
也许你可以看一下这段代码
// JAVASCRIPT
....
const getSelected = () => {
let typeSelection = document.getElementById('typeDropdown').value;
let brandSelection = document.getElementById('brandDropdown').value;
let selection = document.getElementById('dropDownSelection');
// Show all cars
if (brandSelection === 'All' && typeSelection === 'All') {
selection.innerHTML = '';
Data.forEach((car) => {
selection.innerHTML += `<div class="car">
<h3>${car.brand}</h3>
<p>${car.type}</p>
<p>${car.model}</p>
<p>${car.year}</p>
<p>${car.price}</p>
</div>`;
});
}
// Show selected brand
else if (brandSelection !== 'All' && typeSelection === 'All') {
selection.innerHTML = '';
Data.filter((car) => car.brand === brandSelection).forEach((car) => {
selection.innerHTML += `<div class="car">
<h3>${car.brand}</h3>
<p>${car.type}</p>
<p>${car.model}</p>
<p>${car.year}</p>
<p>${car.price}</p>
</div>`;
});
// Show selected type
} else if (brandSelection === 'All' && typeSelection !== 'All') {
selection.innerHTML = '';
Data.filter((car) => car.type === typeSelection).forEach((car) => {
selection.innerHTML += `<div class="car">
<h3>${car.brand}</h3>
<p>${car.type}</p>
<p>${car.model}</p>
<p>${car.year}</p>
<p>${car.price}</p>
</div>`;
});
// show selected brand and type
} else {
selection.innerHTML = '';
Data.filter(
(car) => car.brand === brandSelection && car.type === typeSelection,
).forEach((car) => {
selection.innerHTML += `<div class="car">
<h3>${car.brand}</h3>
<p>${car.type}</p>
<p>${car.model}</p>
<p>${car.year}</p>
<p>${car.price}</p>
</div>`;
});
}
};
....// HTML
....
<div class="dropDown">
<div class="Brand">
<select name="" id="brandDropdown" onchange="getSelected()">
<option value="All">All</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Mazda">Mazda</option>
<option value="Tesla">Tesla</option>
</select>
</div>
<div class="Type">
<select name="" id="typeDropdown" onchange="getSelected()">
<option value="">Type</option>
<option value="All">All</option>
<option value="Car">Car</option>
<option value="Truck">Truck</option>
</select>
</div>
</div>
....正如您所看到的，2 个下拉列表仅调用一个函数 getSelected()，这是因为如果您执行 2 个过滤器，则必须将它们彼此组合在一起，而不是分成 2 个函数。我希望这会有所帮助，谢谢
关于javascript - 使用多个选择选项过滤数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73229345/