Change JS code for a menu that filters by attribute

Question

I have a drop-down menu with JS code to:

Identify paragraphs on a page with the ('data-mc-conditions') attribute + the corresponding menu value and show them.
Identify all other paragraphs with the ('data-mc-conditions') attribute that don't have the selected menu value and hide them.

I've added the "multiple" attribute to the "select" menu, but need to change the supporting JS code - myFunction() - to filter on the ('data-mc-conditions') attribute by more than one option selected in the menu. At the moment, while it appears that users can select multiple options in the menu, the code only filters on the last menu item clicked.

I'll also need the code to support two additional menus that filter using the ('data-mc-conditions') attribute.

I'm in a little over my head and could use help - thanks in advance for any help you can provide!

This is the JS code that shows or hides by attribute value. At the moment, it only filters against one selected menu option at a time. I need it to support multiple selections. Continuing to filter against the 'data-mc-conditions' attribute value is very important to this solution. It uses a CSS 'hidden1' class to do the hiding.

myFunction()

function getElementsWithAttribute(attr) {
  var elementsWithAttribute = [];
  var elements = document.body.getElementsByTagName('*');
  for (var i = 0; i < elements.length; i++) {
    if (elements[i].getAttribute(attr)) {
      elementsWithAttribute.push(elements[i]);
    }
  }
  return elementsWithAttribute;
}

function showHideVersion() {
  var elements = getElementsWithAttribute('data-mc-conditions');
  var e = document.getElementById('version-select');
  var selectedVersion = e.options[e.selectedIndex].value;
  for (var i = 0; i < elements.length; i++) {
    if (elements[i].getAttribute('data-mc-conditions').indexOf(selectedVersion) > -1) {
      elements[i].classList.remove("hidden1");
      localStorage.id = e.options[e.selectedIndex].value;
    } else {
      elements[i].classList.add("hidden1");
    }
  }
}


This is content for Version 1
This is content for Version 2
This is content for Version 3
This is content for V1 and V2
This is content for V1 and V3
This is content for V2 and V3
This is content for V1, V2, and V3

Thanks for any light you can shed! <3

Change JS code for a <select> menu that filters by attribute to a <select multiple> menu that filters by attribute

0 Answers