如何使用选择框过滤 UL 列表？

Question

I need to filter an HTML UL list using a select-box.我需要使用选择框过滤 HTML UL 列表。 The code below filters an HTML table using a select-box:下面的代码使用选择框过滤 HTML 表：

 function myFunction() { var input, filter, table, tr, td, i; input = document.getElementById("myList"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } }

 <select id="myList" onchange="myFunction()" class='form-control'> <option value="">YEAR</option> <option value="y19">2019</option> <option value="y18">2018</option> <option value="y17">2017</option> </select> <table id="myTable"> <tr><td><class="y19">Germany</td></tr> <tr><td><class="y18">Sweden</td></tr> <tr><td><class="y17 y18 y19">UK</td></tr> <tr><td><class="y18 y19">Australia</td></tr> <tr><td><class="y18">Canada</td></tr> <tr><td><class="y18">Italy</td></tr> </table>

I turned the table into an UL but failed to adapt the javascript and make it work.我将表格变成了 UL，但未能适应 javascript 并使其工作。 Can anyone help?任何人都可以帮忙吗？

 <ul id="myUL"> <li class="y19">Germany</li> <li class="y18">Sweden</li> <li class="y17 y18 y19">UK</li> <li class="y18 y19">Australia</li> <li class="y18">Canada</li> <li class="y18">Italy</li> </ul>

Answer 1

Here you go:这里是 go：

<!DOCTYPE html>
<html>
<body>

<select id="myList" onchange="myFunction()" class='form-control'>
<option value="">YEAR</option>
<option value="y19">2019</option>
<option value="y18">2018</option>
<option value="y17">2017</option>
</select>

<ul id="myUL">
<li class="y19">Germany</li>
<li class="y18">Sweden</li>
<li class="y17 y18 y19">UK</li>
<li class="y18 y19">Australia</li>
<li class="y18">Canada</li>
<li class="y18">Italy</li>
</ul>

<script>
function myFunction() {
var input, filter, ul, li, i;
input = document.getElementById("myList");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {

    if (li[i].className.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "";
    } else {
        li[i].style.display = "none";
    }
}
}
</script>

</body>
</html>

Answer 2

Here is a filtering method, using classes:这是一种使用类的过滤方法：

 // setting up base elements const select = document.getElementById('myList') const list = document.getElementById('myUL') const items = list.querySelectorAll('li') // filter function const filter = (val, l, is) => { // clear the list l.innerHTML = '' //iterating over the list is.forEach(e => { // filter condition if (e.classList.contains(val) || val == '') { // adding back elements l.appendChild(e) } }) } // filtering on change event select.addEventListener('change', function(e) { filter(e.target.value, list, items) })

 <select id="myList" class='form-control'> <option value="">YEAR</option> <option value="y19">2019</option> <option value="y18">2018</option> <option value="y17">2017</option> </select> <ul id="myUL"> <li class="y19">Germany</li> <li class="y18">Sweden</li> <li class="y17 y18 y19">UK</li> <li class="y18 y19">Australia</li> <li class="y18">Canada</li> <li class="y18">Italy</li> </ul>

The main point is that it's only JavaScript - you don't need anything else.重点是它只是 JavaScript - 你不需要其他任何东西。

And then there's an even shorter version:然后还有一个更短的版本：

 const select = document.getElementById('myList') const items = document.querySelectorAll('#myUL li') select.addEventListener('change', function(e) { items.forEach(el => { if (el.classList.contains(e.target.value) || e.target.value == "") { el.style.display = 'block' } else { el.style.display = 'none' } }) })

 <select id="myList" class='form-control'> <option value="">YEAR</option> <option value="y19">2019</option> <option value="y18">2018</option> <option value="y17">2017</option> </select> <ul id="myUL"> <li class="y19">Germany</li> <li class="y18">Sweden</li> <li class="y17 y18 y19">UK</li> <li class="y18 y19">Australia</li> <li class="y18">Canada</li> <li class="y18">Italy</li> </ul>

The former snippet effectively removes the items from the DOM , so other won't find them and won't work with them, the latter only hides the filtered items and shows the not filtered items.前一个片段有效地从 DOM 中删除了项目，因此其他人不会找到它们并且不会使用它们，后者只隐藏过滤的项目并显示未过滤的项目。

And for last, here's the jQuery method:最后，这里是 jQuery 方法：

 $('#myList').on('change', function(e) { const self = this $('#myUL li').each(function(i, el) { if ($(el).hasClass(self.value) || self.value == '') { $(el).css({ 'display': 'block' }) } else { $(el).css({ 'display': 'none' }) } }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="myList" class='form-control'> <option value="">YEAR</option> <option value="y19">2019</option> <option value="y18">2018</option> <option value="y17">2017</option> </select> <ul id="myUL"> <li class="y19">Germany</li> <li class="y18">Sweden</li> <li class="y17 y18 y19">UK</li> <li class="y18 y19">Australia</li> <li class="y18">Canada</li> <li class="y18">Italy</li> </ul>

如何使用选择框过滤 UL 列表？

问题描述

2 个解决方案

解决方案1
0 已采纳 2019-10-11 14:15:34

解决方案2
0 2019-10-11 14:24:42

如何使用选择框过滤 UL 列表？

问题描述

2 个解决方案

解决方案1 0 已采纳 2019-10-11 14:15:34

解决方案2 0 2019-10-11 14:24:42

解决方案1
0 已采纳 2019-10-11 14:15:34

解决方案2
0 2019-10-11 14:24:42