是一个常见的前端开发需求,可以通过以下步骤实现:
以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<title>对象数组过滤和类别选择</title>
</head>
<body>
<input type="text" id="filterInput" placeholder="输入关键字">
<button onclick="filterObjects()">筛选</button>
<select id="categorySelect" onchange="filterObjects()">
<option value="">全部类别</option>
<option value="电子产品">电子产品</option>
<option value="家居用品">家居用品</option>
<option value="服装">服装</option>
</select>
<ul id="filteredObjects"></ul>
<script>
const objects = [
{ name: 'iPhone 12', category: '电子产品', price: 6999 },
{ name: 'MacBook Pro', category: '电子产品', price: 12999 },
{ name: '智能手表', category: '电子产品', price: 999 },
{ name: '沙发', category: '家居用品', price: 2999 },
{ name: '餐桌', category: '家居用品', price: 1999 },
{ name: 'T恤', category: '服装', price: 99 },
{ name: '牛仔裤', category: '服装', price: 199 },
];
function filterObjects() {
const keyword = document.getElementById('filterInput').value.toLowerCase();
const category = document.getElementById('categorySelect').value;
const filtered = objects.filter(obj => {
const nameMatch = obj.name.toLowerCase().includes(keyword);
const categoryMatch = category === '' || obj.category === category;
return nameMatch && categoryMatch;
});
const filteredList = document.getElementById('filteredObjects');
filteredList.innerHTML = '';
filtered.forEach(obj => {
const li = document.createElement('li');
li.textContent = `${obj.name} - ¥${obj.price}`;
filteredList.appendChild(li);
});
}
</script>
</body>
</html>
在上述示例中,我们创建了一个包含商品信息的对象数组,并在页面上创建了一个输入框和一个按钮用于过滤对象数组。还创建了一个下拉菜单用于选择类别。通过监听输入框和下拉菜单的变化事件,调用filterObjects()函数进行过滤和类别选择操作。最后,将过滤后的对象数组渲染到页面上的一个无序列表中。
这个示例中没有涉及到云计算相关的内容,因此无需提供腾讯云相关产品和产品介绍链接地址。
领取专属 10元无门槛券
手把手带您无忧上云