JS-我想为我的活动创建一个下拉过滤器菜单

Question

我对使用JS编码非常陌生，因此似乎无法找到如何创建一个下拉过滤菜单的功能，该菜单可以过滤内容以仅显示页面上的某些事件。

询问您是否需要更多信息，这也是我的第一篇Stackoverflow帖子，所以我不知道要包含多少内容。

提前谢谢！

HTML

<section id="events">
        <main>
            <section class="container" data-container></section>
            <template data-template>
            <article class="postListview">
                <div class="card middle">
                     <div class="front">
                <img src="" alt="">
                    </div>
                 <div class="back">
                     <div class="back-content middle">
             <h2 data-title></h2>
             <div data-text></div>
                <div data-pris></div>
                <div data-tid></div>
                <div data-sted></div>
                </div>
                     </div>
                    </div>
             </article>
         </template>
        </main>

JS

<script>
document.addEventListener("DOMContentLoaded", getJSON);

    let posts;
    let postTemplate = document.querySelector("[data-template]");
    let postContainer = document.querySelector("[data-container]");

    async function getJSON() {
        let jsonData = await fetch("http://www.rigmordesign.com/kea/huset/wordpress/wp-json/wp/v2/events");
        posts = await jsonData.json();
        visPosts();
    }

    function visPosts() {
        console.log(posts);
        posts.forEach(post => {
            let klon = postTemplate.cloneNode(true).content;
            klon.querySelector("[data-title]").textContent = post.title.rendered;
            klon.querySelector("[data-text]").innerHTML = post.content.rendered;

            klon.querySelector("[data-pris]").innerHTML = post.acf.pris;
            klon.querySelector("[data-tid]").innerHTML = post.acf.tid;
            klon.querySelector("[data-sted]").innerHTML = post.acf.sted;
            klon.querySelector("img").src = post.acf.billede;
            postContainer.appendChild(klon);
        })
    }
</script>