帮我写一个多个筛选框组合筛选的前端代码
时间: 2024-05-06 13:20:19 浏览: 5
以下是一个示例代码,其中包含了多个筛选框的组合筛选功能。请根据实际需求进行修改和调整。
HTML代码:
```
<div>
<label for="category">Category:</label>
<select id="category">
<option value="">All</option>
<option value="clothing">Clothing</option>
<option value="shoes">Shoes</option>
<option value="accessories">Accessories</option>
</select>
</div>
<div>
<label for="color">Color:</label>
<select id="color">
<option value="">All</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</div>
<div>
<label for="size">Size:</label>
<select id="size">
<option value="">All</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
</div>
<button id="filter-btn">Filter</button>
<div id="results">
<!-- Filtered results will be displayed here -->
</div>
```
JavaScript代码:
```
const products = [
{ name: 'Red T-shirt', category: 'clothing', color: 'red', size: 'medium' },
{ name: 'Blue Shoes', category: 'shoes', color: 'blue', size: 'large' },
{ name: 'Green Hat', category: 'accessories', color: 'green', size: 'small' },
{ name: 'Red Dress', category: 'clothing', color: 'red', size: 'large' },
{ name: 'Blue Scarf', category: 'accessories', color: 'blue', size: 'medium' },
{ name: 'Green Jacket', category: 'clothing', color: 'green', size: 'large' }
];
const filterBtn = document.getElementById('filter-btn');
const resultsEl = document.getElementById('results');
filterBtn.addEventListener('click', () => {
const category = document.getElementById('category').value;
const color = document.getElementById('color').value;
const size = document.getElementById('size').value;
let filteredProducts = products;
if (category) {
filteredProducts = filteredProducts.filter(product => product.category === category);
}
if (color) {
filteredProducts = filteredProducts.filter(product => product.color === color);
}
if (size) {
filteredProducts = filteredProducts.filter(product => product.size === size);
}
displayResults(filteredProducts);
});
function displayResults(products) {
resultsEl.innerHTML = '';
if (products.length === 0) {
resultsEl.innerHTML = 'No results found.';
return;
}
products.forEach(product => {
const productEl = document.createElement('div');
productEl.innerHTML = product.name;
resultsEl.appendChild(productEl);
});
}
```
在以上代码中,我们定义了一个`products`数组,其中包含了一些商品信息。在HTML代码中,我们定义了三个下拉框,用户可以通过选择不同的选项来筛选出符合条件的商品。当用户点击“Filter”按钮时,JavaScript代码会根据用户选择的选项,对`products`数组进行筛选,并将筛选结果显示在页面上。
请注意,以上代码仅作为示例,实际情况下可能需要根据实际需求进行修改和调整。例如,可以添加更多的筛选条件,或者将筛选结果以不同的方式展示在页面上。