js实现多条件筛选列表

可以通过以下步骤来实现多条件筛选列表：

创建一个包含所有列表项的数组。
创建一个空数组，用于存储符合筛选条件的列表项。
创建一个包含所有筛选条件的对象，每个条件都对应一个输入框或下拉菜单。
监听每个输入框或下拉菜单的变化事件，并在变化时更新筛选条件对象的值。
遍历列表项数组，对于每个列表项，检查是否符合所有筛选条件。
如果列表项符合所有筛选条件，则将其添加到存储结果的数组中。
渲染结果数组中的列表项。

以下是一个简单的实现示例：

// 列表项数组
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();

在上述示例中，我们创建了一个包含商品信息的列表项数组，并设置了三个筛选条件，分别是名称、类别和价格。我们通过监听输入框和下拉菜单的变化事件来更新筛选条件对象的值，并在每次变化后重新渲染列表，只显示符合所有筛选条件的列表项。

js实现多条件筛选列表

猜你喜欢