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);
        } 
    })
}