如何使用選擇框過濾 UL 列表？
[英]How to filter an UL list using a select-box?
問題描述
我需要使用選擇框過濾 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>
2 個解決方案
解決方案1
0 已采納 2019-10-11 14:15:34
這里是 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>
解決方案2
0 2019-10-11 14:24:42
這是一種使用類的過濾方法：
// 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>
使用 jQuery/javaScript 從選擇框中動態選擇選項
[英]select dynamically option from select-box using jQuery/javaScript
如何在帶有 id 鈎子的 div 中查找選擇元素，所選元素不能具有類 .select-box 的父元素？
[英]How to find select elements in a div with id hook, the selected elements must not have parent with class .select-box?
如何根據選擇框值復制 div 一定次數？
[英]How can I replicate a div a certain number of times based on a select-box value?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.