I am currently filtering divs using buttons. How can I switch to a dropdown selection?-CodePudding

I am currently filtering a grid of div elements using buttons at the top of the page. I would like to switch to using a dropdown selection, but I cannot get the filtering to work. I have searched for a solution, but I cannot seem to find the right one.

The current (functioning) setup is:

HTML

<div >
<button  onclick="filterSelection('all')">Show All</button>
<button  onclick="filterSelection('household')">Household Items</button>
<button  onclick="filterSelection('furniture')">Furniture & Appliances</button>
<button  onclick="filterSelection('tech')">Electronics & Tech</button>
<button  onclick="filterSelection('tools')">Tools</button>
<button  onclick="filterSelection('sports')">Sports Equipment</button>
<button  onclick="filterSelection('transportation')">Transportation</button>
<button  onclick="filterSelection('hobbies')">Hobbies</button>
<button  onclick="filterSelection('medical')">Medical Equipment</button>
<button  onclick="filterSelection('misc')">Miscellaneous</button>
<button  onclick="filterSelection('lost')">Lost & Found</button>
</div>

JAVASCRIPT

filterSelection("all");

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("classifieds-item");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i  ) {
    RemoveClass(x[i], "show");
    if (x[i].id.indexOf(c) > -1) AddClass(x[i], "show");
  }
}

function AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i  ) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className  = " "   arr2[i];}
  }
}

function RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i  ) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}

I would like to change the html to something like this:

<select  onchange="filterSelection()">
<option value="all">Show All</option>
<option value="household)">Household Items</option>
<option value="furniture">Furniture & Appliances</option>
<option value="tech">Electronics & Tech</option>
<option value="tools">Tools</option>
<option value="sports">Sports Equipment</option>
<option value="transportation">Transportation</option>
<option value="hobbies">Hobbies</option>
<option value="medical">Medical Equipment</option>
<option value="misc">Miscellaneous</option>
<option value="lost">Lost & Found</option>
</select>

But for the life of me I cannot produce a script that will make it work.

CodePudding user response：

try that :

<select >
  <option value="all"   selected > Show All               </option>
  <option value="household"      > Household Items        </option>
  <option value="furniture"      > Furniture & Appliances </option>
  <option value="tech"           > Electronics & Tech     </option>
  <option value="tools"          > Tools                  </option>
  <option value="sports"         > Sports Equipment       </option>
  <option value="transportation" > Transportation         </option>
  <option value="hobbies"        > Hobbies                </option>
  <option value="medical"        > Medical Equipment      </option>
  <option value="misc"           > Miscellaneous          </option>
  <option value="lost"           > Lost & Found           </option>
</select>

const
  selectFilter     = document.querySelector('select.filterContainer')
, classifiedsItems = document.querySelectorAll('.classifieds-item')
  ;
filterSelection();
selectFilter.addEventListener('change',filterSelection );

function filterSelection(evt)
  {
  let sALL = (selectFilter.value === 'all')
  classifiedsItems.forEach( elm => 
    {
    elm.classList.toggle('show', sALL || elm.id.includes(selectFilter.value) )
    });
  }

and no more code...