As third-party plugin/library recommendations are not on-topic on this StackExchange, the next best option is a code-based solution. If you can describe why you can’t use a code-based solution I could possibly provide a better answer.
You can accomplish this using some simple JavaScript event listeners on the <select>
element. This would require you to be able to add data
attributes to the elements for filtering mind you.
<!-- Select filter -->
<label>Category:
<select id="category-select">
<option>All Categories</option>
<option>Category 1</option>
<option>Category 2</option>
</select>
</label>
<!-- Templates -->
<div class="template" data-category="Category 1">
<p>Template 1</p>
</div>
<div class="template" data-category="Category 2">
<p>Template 2</p>
</div>
<!-- Event handling -->
<script>
window.addEventListener('load', () => {
let categorySelect = document.getElementById('category-select');
// runs code on change of the value of #category-select
categorySelect.addEventListener('change', (e) => {
let value = e.target.value;
let allRows = document.querySelectorAll('.template');
// show all rows if 'All Categories' is selected
if (value === 'All Categories') {
allRows.forEach((el) => {
el.style.display = 'block';
});
} else {
// sets all rows to hidden first
allRows.forEach((el) => {
el.style.display = 'none';
});
// then sets the ones in that category back to shown
let valueRows = document.querySelectorAll(`.template[data-category="${value}"]`);
valueRows.forEach((el) => {
el.style.display = 'block';
});
}
});
});
</script>
This will change the results displayed on the page as you select different options in the dropdown menu.