Get started with Selectivity.js CDN
MIT licensed
Selectivity.js is a lightweight CSS selector engine for JS.
Tags:- custom
- template
- loading indicators
Stable version
Copied!
How to start using Selectivity.js CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with Selectivity.js CDN - cdnhub.io</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.cdnhub.io/Selectivity.js/3.1.0/selectivity-full.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const select = document.querySelector('#my-select');
const list = document.querySelector('#my-list');
const selectivity = new Selectivity(select);
selectivity
.on('change', () => {
const selectedValue = select.value;
const items = list.querySelectorAll('li');
items.forEach((item) => {
const matches = selectivity.matches(item);
item.style.display = matches ? 'list-item' : 'none';
});
});
select.addEventListener('change', () => {
selectivity.refresh();
});
});
</script>
</head>
<body>
<label for="my-select">Filter:</label>
<select id="my-select">
<option value="all">Show all</option>
<option value="apple">Apples</option>
<option value="banana">Bananas</option>
<option value="orange">Oranges</option>
</select>
<ul id="my-list">
<li data-select="apple">Apple</li>
<li data-select="banana">Banana</li>
<li data-select="apple orange">Apple and Orange</li>
<li data-select="orange">Orange</li>
<li data-select="banana apple">Banana and Apple</li>
</ul>
</body>
</html>