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

Question

我需要使用选择框过滤 HTML UL 列表。 下面的代码使用选择框过滤 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>

我将表格变成了 UL，但未能适应 javascript 并使其工作。 任何人都可以帮忙吗？

 <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

这里是 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

这是一种使用类的过滤方法：

 // 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>

重点是它只是 JavaScript - 你不需要其他任何东西。

然后还有一个更短的版本：

 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>

前一个片段有效地从 DOM 中删除了项目，因此其他人不会找到它们并且不会使用它们，后者只隐藏过滤的项目并显示未过滤的项目。

最后，这里是 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