javascript - 选择列表过滤json数据
问题描述
我想通过选择列表从 json 过滤。现在,当我从选择列表中选择值时,它会在列表末尾提供选定的产品,我只想显示那些选择的产品
function showContent(data) {
const contentBox = document.querySelector('#content__products');
const select = document.querySelector('.products__select');
data.map(function (product) {
return selectCat(product)
})
}
function selectCat(product) {
const select = document.querySelector('.products__select');
createProduct(product)
select.addEventListener('change',() => {
if(select.value == product.cat) {
createProduct(product);
}
})
}
function createProduct(product) {
const contentBox = document.querySelector('#product__list');
const element = prepareElement('div',['product__elem']);
const imageElement = prepareElement('img', ['product__img'], element);
const nameProd = prepareElement('p',['product__name'], element);
const catProd = prepareElement('p',['product__cat'], element);
contentBox.appendChild(element)
imageElement.setAttribute('src', product.img);
nameProd.innerText = product.name;
catProd.innerText = 'Category:' + ' ' + product.cat;
}
解决方案
您可以隐藏与过滤器不匹配的元素。在您的代码中,我假设您需要先用产品清洁容器。
function selectCat(product) {
const select = document.querySelector('.products__select');
createProduct(product)
select.addEventListener('change',() => {
var contentBox = document.getElementById('product__list');
while (contentBox.firstChild) {
contentBox.removeChild(contentBox.firstChild);
}
if(select.value == product.cat) {
createProduct(product);
}
})
}
推荐阅读
- python - 如何从python中的嵌套列表中删除双引号
- reactjs - 在父组件中运行具有函数的子组件
- windows - Flutter、Windows 应用程序、连接到 USB 的热敏打印机
- jquery - 如何在jquery中使用id输入表单元素作为变量?
- sql - select over partition by ... order by .. used long time
- java - Android CRUD MediaStore API 26+
- visual-studio - 从 msbuild 命令行控制 Windows SDK 版本?
- programming-languages - 上下文无关语法设计 - 为什么不允许这样做?
- sql - 获取保存在多行中的相应代码
- docker - Rancher中启动pod后如何注册gitlab runner