Javascript/HTML 多個下拉復選框列表

Question

我非常深入地學習了我對多種語言知之甚少的語言，我將非常感謝一些漂浮物。

目標是創建一個可以通過下拉復選框過濾的表。 目前一個下拉復選框有效，我無法弄清楚如何使多個工作。

 function filter(event, filterCol) { let element = event.target; let condt1 = document.getElementsByClassName(filterCol); var table = document.getElementById("listingTable"); for (let i = 0; i < condt1.length; i++) { if (condt1[i].innerHTML.toLocaleUpperCase() == element.value.toLocaleUpperCase()) { if (element.checked == true) { condt1[i].parentElement.closest('tr').style = "display:table-row" } else { condt1[i].parentElement.closest('tr').style = "display:none" } } } } document.querySelectorAll('.option1').forEach(input => input.addEventListener('input', ()=>filter(event,"check1"))); document.querySelectorAll('.option2').forEach(input => input.addEventListener('input', ()=>filter(event,"check2"))); document.querySelectorAll('.option3').forEach(input => input.addEventListener('input', ()=>filter(event,"check3"))); document.querySelectorAll('.option4').forEach(input => input.addEventListener('input', ()=>filter(event,"check4"))); document.querySelectorAll('.option5').forEach(input => input.addEventListener('input', ()=>filter(event,"check5"))); document.querySelectorAll('.option6').forEach(input => input.addEventListener('input', ()=>filter(event,"check6"))); document.querySelectorAll('.option7').forEach(input => input.addEventListener('input', ()=>filter(event,"check7"))); document.querySelectorAll('.option8').forEach(input => input.addEventListener('input', ()=>filter(event,"check8"))); var checkList = document.getElementById('list1'); checkList.getElementsByClassName('anchor')[0].onclick = function(evt) { if (checkList.classList.contains('visible')) checkList.classList.remove('visible'); else checkList.classList.add('visible'); }

 .dropdown-check-list { display: inline-block; }.dropdown-check-list.anchor { position: relative; cursor: pointer; display: inline-block; padding: 5px 50px 5px 10px; border: 1px solid #ccc; }.dropdown-check-list.anchor:after { position: absolute; content: ""; border-left: 2px solid black; border-top: 2px solid black; padding: 5px; right: 10px; top: 20%; -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }.dropdown-check-list.anchor:active:after { right: 8px; top: 21%; }.dropdown-check-list ul.items { padding: 2px; display: none; margin: 0; border: 1px solid #ccc; border-top: none; }.dropdown-check-list ul.items li { list-style: none; }.dropdown-check-list.visible.anchor { color: #0094ff; }.dropdown-check-list.visible.items { display: block; }

 <div id="list1" class="dropdown-check-list" tabindex="100"> <span class="anchor">Spore Print Colour 1</span> <ul class="items"> <li><label>Brown<input class="option1" type="checkbox" value="Brown" checked/></label></li> <li><label>Other<input class="option1" type="checkbox" value="Other" checked/></label></li> <li><label>Dark (non-brown)<input class="option1" type="checkbox" value="Dark (non-brown)" checked/></label></li> <li><label>Pale<input class="option1" type="checkbox" value="Pale" checked/></label></li> <li><label>Pink<input class="option1" type="checkbox" value="Pink" checked/></label></li> </ul> </div> <div id="list2" class="dropdown-check-list" tabindex="100"> <span class="anchor">Spore Print Colour 2</span> <ul class="items"> <li><label>Chocolate-Brown<input class="option2" type="checkbox" value="Chocolate-Brown" checked/></label></li> <li><label>Purple-Brown<input class="option2" type="checkbox" value="Purple-Brown" checked/></label></li> <li><label>Gray-Green<input class="option2" type="checkbox" value="Gray-Green" checked/></label></li> <li><label>Olive<input class="option2" type="checkbox" value="Olive" checked/></label></li> <li><label>Black<input class="option2" type="checkbox" value="Black" checked/></label></li> <li><label>White<input class="option2" type="checkbox" value="White" checked/></label></li> <li><label>Cream<input class="option2" type="checkbox" value="Cream" checked/></label></li> <li><label>Olive-Gray<input class="option2" type="checkbox" value="Olive-Gray" checked/></label></li> <li><label>Reddish<input class="option2" type="checkbox" value="Reddish" checked/></label></li> <li><label>Dark Brown<input class="option2" type="checkbox" value="Dark Brown" checked/></label></li> <li><label>Cinnamon-Brown<input class="option2" type="checkbox" value="Cinnamon-Brown" checked/></label></li> <li><label>Brown<input class="option2" type="checkbox" value="Brown" checked/></label></li> <li><label>Rusty-brown<input class="option2" type="checkbox" value="Rusty-brown" checked/></label></li> <li><label>Yellow-Brown<input class="option2" type="checkbox" value="Yellow-Brown" checked/></label></li> <li><label>Olive-brown<input class="option2" type="checkbox" value="Olive-brown" checked/></label></li> <li><label>Pink<input class="option2" type="checkbox" value="Pink" checked/></label></li> <li><label>Orange-Brown<input class="option2" type="checkbox" value="Orange-Brown" checked/></label></li> <li><label>Pink-Brown<input class="option2" type="checkbox" value="Pink-Brown" checked/></label></li> <li><label>Pale Yellow<input class="option2" type="checkbox" value="Pale Yellow" checked/></label></li> <li><label>Pink-Buff<input class="option2" type="checkbox" value="Pink-Buff" checked/></label></li> <li><label>Purple<input class="option2" type="checkbox" value="Purple" checked/></label></li> <li><label>Brick Red<input class="option2" type="checkbox" value="Brick Red" checked/></label></li> <li><label>Purple - Brown<input class="option2" type="checkbox" value="Purple - Brown" checked/></label></li> <li><label>Purple - Black<input class="option2" type="checkbox" value="Purple - Black" checked/></label></li> <li><label>Rusty-Brown<input class="option2" type="checkbox" value="Rusty-Brown" checked/></label></li> <li><label>Yellow<input class="option2" type="checkbox" value="Yellow" checked/></label></li> <li><label>Buff<input class="option2" type="checkbox" value="Buff" checked/></label></li> <li><label>Reddish-Brown<input class="option2" type="checkbox" value="Reddish-Brown" checked/></label></li> </ul> </div> <div id="list3" class="dropdown-check-list" tabindex="100"> <span class="anchor">Habitat</span> <ul class="items"> <li><label>Ground<input class="option3" type="checkbox" value="Ground" checked/></label></li> <li><label>Wood<input class="option3" type="checkbox" value="Wood" checked/></label></li> <li><label>Dung<input class="option3" type="checkbox" value="Dung" checked/></label></li> <li><label>Moss<input class="option3" type="checkbox" value="Moss" checked/></label></li> <li><label>Other Mushrooms<input class="option3" type="checkbox" value="Other Mushrooms" checked/></label></li> <li><label>Cones<input class="option3" type="checkbox" value="Cones" checked/></label></li> </ul> </div> <div id="list4" class="dropdown-check-list" tabindex="100"> <span class="anchor">Size</span> <ul class="items"> <li><label>Medium<input class="option4" type="checkbox" value="Medium" checked/></label></li> <li><label>Large<input class="option4" type="checkbox" value="Large" checked/></label></li> <li><label>Small<input class="option4" type="checkbox" value="Small" checked/></label></li> </ul> </div> <div id="list5" class="dropdown-check-list" tabindex="100"> <span class="anchor">Unique Cap Features</span> <ul class="items"> <li><label>Fibrous<input class="option5" type="checkbox" value="Fibrous" checked/></label></li> <li><label>Scaly<input class="option5" type="checkbox" value="Scaly" checked/></label></li> <li><label>None<input class="option5" type="checkbox" value="None" checked/></label></li> <li><label>Umbonate<input class="option5" type="checkbox" value="Umbonate" checked/></label></li> <li><label>Powdery<input class="option5" type="checkbox" value="Powdery" checked/></label></li> <li><label>Warted<input class="option5" type="checkbox" value="Warted" checked/></label></li> <li><label>Conical<input class="option5" type="checkbox" value="Conical" checked/></label></li> <li><label>Slimy or Sticky<input class="option5" type="checkbox" value="Slimy or Sticky" checked/></label></li> <li><label>Striate<input class="option5" type="checkbox" value="Striate" checked/></label></li> <li><label>Wrinkled<input class="option5" type="checkbox" value="Wrinkled" checked/></label></li> <li><label>Velvety<input class="option5" type="checkbox" value="Velvety" checked/></label></li> <li><label>Depressed<input class="option5" type="checkbox" value="Depressed" checked/></label></li> <li><label>Funnel Shaped<input class="option5" type="checkbox" value="Funnel Shaped" checked/></label></li> <li><label>Plicate Margin<input class="option5" type="checkbox" value="Plicate Margin" checked/></label></li> <li><label>Funnel-Shaped<input class="option5" type="checkbox" value="Funnel-Shaped" checked/></label></li> <li><label>Inrolled Margin<input class="option5" type="checkbox" value="Inrolled Margin" checked/></label></li> <li><label>Hygrophanous<input class="option5" type="checkbox" value="Hygrophanous" checked/></label></li> <li><label>Umbo<input class="option5" type="checkbox" value="Umbo" checked/></label></li> </ul> </div> <div id="list6" class="dropdown-check-list" tabindex="100"> <span class="anchor">Unique Stipe Features</span> <ul class="items"> <li><label>Hollow<input class="option6" type="checkbox" value="Hollow" checked/></label></li> <li><label>None<input class="option6" type="checkbox" value="None" checked/></label></li> <li><label>Bulbous Base<input class="option6" type="checkbox" value="Bulbous Base" checked/></label></li> <li><label>Scaly<input class="option6" type="checkbox" value="Scaly" checked/></label></li> <li><label>Powdery<input class="option6" type="checkbox" value="Powdery" checked/></label></li> <li><label>Volva<input class="option6" type="checkbox" value="Volva" checked/></label></li> <li><label>Fibrous<input class="option6" type="checkbox" value="Fibrous" checked/></label></li> <li><label>Slimy or Sticky<input class="option6" type="checkbox" value="Slimy or Sticky" checked/></label></li> <li><label>Rooting<input class="option6" type="checkbox" value="Rooting" checked/></label></li> <li><label>Velvety<input class="option6" type="checkbox" value="Velvety" checked/></label></li> </ul> </div> <div id="list1" class="dropdown-check-list" tabindex="100"> <span class="anchor">Partial Veil</span> <ul class="items"> <li><label>Yes<input class="option7" type="checkbox" value="Yes" checked/></label></li> <li><label>No<input class="option7" type="checkbox" value="No" checked/></label></li> <li><label>nan<input class="option7" type="checkbox" value="nan" checked/></label></li> </ul> </div> <div id="list7" class="dropdown-check-list" tabindex="100"> <span class="anchor">Gill Attachement</span> <ul class="items"> <li><label>Free<input class="option8" type="checkbox" value="Free" checked/></label></li> <li><label>Barely Attached<input class="option8" type="checkbox" value="Barely Attached" checked/></label></li> <li><label>Attached<input class="option8" type="checkbox" value="Attached" checked/></label></li> <li><label>Notched<input class="option8" type="checkbox" value="Notched" checked/></label></li> <li><label>Bluntly Attached<input class="option8" type="checkbox" value="Bluntly Attached" checked/></label></li> <li><label>Decurrent<input class="option8" type="checkbox" value="Decurrent" checked/></label></li> <li><label>nan<input class="option8" type="checkbox" value="nan" checked/></label></li> </ul> </div> <table border="1" class="dataframe"> <thead> <tr style="text-align: right;"> <th>Family Name</th> <th>Genus Name</th> <th>Spore Print Colour Description</th> <th>Spore Print Colour 1</th> <th>Spore Print Colour 2</th> <th>Habitat</th> <th>Habitat Description</th> <th>Ecology</th> <th>Size</th> <th>Unique Cap Features</th> <th>Cap Description</th> <th>Partial Veil</th> <th>Gill Description</th> <th>Gill Attachement</th> <th>Unique Stipe Features</th> <th>Stipe Description</th> <th>Additional Features of Note</th> <th>Similar Genera / Look-alikes</th> <th>Additional Information</th> <th>Top Five NE Species</th> <th>Species to Species Identification Difficulty</th> </tr> </thead> <tbody> <tr> <td>Agaricaceae</td> <td>Agaricus sp.</td> <td>Chocolate-Brown / Purple-Brown</td> <td class="check1">Brown</td> <td class="check2">Chocolate-Brown</td> <td class="check3">Ground</td> <td>Ground | Various. Roadsides, Grass, Meadows, Woodland... etc.</td> <td>Saprobic</td> <td class="check4">Medium</td> <td class="check5">Fibrous</td> <td>Fibrous / Scaly / None | Glabrous or with flattened fibers, not brightly coloured. Fleshy</td> <td>Yes</td> <td>Free / Barely Attached | Remote from stem. Pink when young. Dark brown and free or almost free at maturity. Close / Crowded</td> <td>Free</td> <td class="check6">Hollow</td> <td>Hollow / None | n/a</td> <td>Medium / Large | Veil: Yes | Flesh thick, white. Usually white / gray / brown. Flesh, cap margin, base of stipe can often bruise yellow / red.</td> <td>Agrocybe are smaller and don't always have a partial veil.</td> <td>Chemical Reactions: KOH- negative or yellow-orange</td> <td>Agaricus bitorquis, Agaricus arvensis, Agaricus campestris, Agaricus nanaugustus, Agaricus xanthodermus</td> <td>Contains many species. Some are easy, some are extremely difficult.</td> </tr>

var 清單是控制下拉列表的東西，我已經用我的大腦可以想出的許多方式來處理它，但不止一個下拉列表永遠不會起作用。

提前致謝！

附言。 如果您對如何使表格行獨一無二同時仍然能夠使用它們進行過濾有任何想法，請告訴我。 可能是這里的未來帖子......

Answer 1

您可以使用document.getElementsByClassName （或document.querySelectorAll ）來獲取所有 checkList 元素，然后將相同的邏輯應用於每個元素。

let checkLists = document.getElementsByClassName('dropdown-check-list');

for(let i = 0; i < checkLists.length; i++) {
  let checkList = checkLists[i];

  checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
    if (checkList.classList.contains('visible'))
      checkList.classList.remove('visible');
    else
      checkList.classList.add('visible');
  }
}