Javascript/HTML Multiple dropdown checkbox lists

Question

I jumped in very deep into multiple languages I know very little about, I would very much appreciate some floaties.

The goal is to create a table that can be filtered by drop down checkboxes. Currently one dropdown checkbox works, and I cannot figure out how to make more than one work.

 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>

The var checklist is what controls the dropdown and I have messed around with it in however many ways my brain could come up with, but more than one drop down never works.

Thanks in advance!

ps. if you have any ideas for how to make the table rows unique while still being able to use them to filter, please let me know. likely be a future post on here...

Answer 1

You can use document.getElementsByClassName (or document.querySelectorAll ) to get all the checkList elements, then apply the same logic to each of them.

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');
  }
}