可以通过以下步骤来实现多条件筛选列表:
以下是一个简单的实现示例:
// 列表项数组
const items = [
{ name: 'Apple', category: 'Fruit', price: 2.5 },
{ name: 'Banana', category: 'Fruit', price: 1.5 },
{ name: 'Carrot', category: 'Vegetable', price: 0.8 },
{ name: 'Tomato', category: 'Vegetable', price: 1.2 },
{ name: 'Orange', category: 'Fruit', price: 3.0 },
];
// 筛选条件对象
const filters = {
name: '',
category: '',
price: '',
};
// 更新筛选条件对象的值
function updateFilter(key, value) {
filters[key] = value;
renderList();
}
// 检查是否符合筛选条件
function checkFilters(item) {
for (let key in filters) {
if (filters[key] !== '' && item[key] !== filters[key]) {
return false;
}
}
return true;
}
// 渲染列表
function renderList() {
const filteredItems = items.filter(checkFilters);
// 渲染筛选结果
// ...
}
// 监听筛选条件输入框和下拉菜单的变化事件
document.getElementById('nameInput').addEventListener('change', (event) => {
updateFilter('name', event.target.value);
});
document.getElementById('categorySelect').addEventListener('change', (event) => {
updateFilter('category', event.target.value);
});
document.getElementById('priceInput').addEventListener('change', (event) => {
updateFilter('price', event.target.value);
});
// 初始化列表
renderList();
在上述示例中,我们创建了一个包含商品信息的列表项数组,并设置了三个筛选条件,分别是名称、类别和价格。我们通过监听输入框和下拉菜单的变化事件来更新筛选条件对象的值,并在每次变化后重新渲染列表,只显示符合所有筛选条件的列表项。