Show/ hide elements on page with conditional html selects-CodePudding

This is most likely a duplicate, but I couldn't find snippets that help me out

I have a page with multiple images and two select fields. I want to show depending on the selection of the user different images. For the individual selects this is easy, but how can I achieve a dependency between both selects the easy way?

Example:
Items on Page: "A B", "A", "B"
User selection:
First select: A
Second select: B
Result: "A B"

User selection:
First select: A
Second select: empty
Result: "A"

I think you get the point.

The few snippets I've found are made with jQuery and I would really like to avoid jQuery and only use vanilla JS.

My current approach:

let redShown;
let blueShown;
let greenShown;

let oneShown;
let twoShown;
let threeShown;


// ColorFilter
function colorFilter(select) {
  if (select.value == "red") {
    redShown = true;
    blueShown = false;
    greenShown = false;
    // Show Red
    for (let i = 0; i < document.querySelectorAll(".box.red").length; i  ) {
      document.querySelectorAll(".box.red")[i].style.display = "inherit";
    }
    // Hide everything else than red
    for (let i = 0; i < document.querySelectorAll(".box:not(.red)").length; i  ) {
      document.querySelectorAll(".box:not(.red)")[i].style.display = "none";
    }
  } else if (select.value == "blue") {
    blueShown = true;
    redShown = false;
    greenShown = false;
    // Show Blue
    for (let i = 0; i < document.querySelectorAll(".box.blue").length; i  ) {
      document.querySelectorAll(".box.blue")[i].style.display = "inherit";
    }
    // Hide everything else than blue
    for (let i = 0; i < document.querySelectorAll(".box:not(.blue)").length; i  ) {
      document.querySelectorAll(".box:not(.blue)")[i].style.display = "none";
    }
  } else if (select.value == "green") {
    greenShown = true;
    redShown = false;
    blueShown = false;
    // Show Green
    for (let i = 0; i < document.querySelectorAll(".box.green").length; i  ) {
      document.querySelectorAll(".box.green")[i].style.display = "inherit";
    }
    // Hide everything else than green
    for (let i = 0; i < document.querySelectorAll(".box:not(.green)").length; i  ) {
      document.querySelectorAll(".box:not(.green)")[i].style.display = "none";
    }
  }
}



// Numberfilter
function numberFilter(select) {
  if (select.value == "one") {
    oneShown = true;
    twoShown = false;
    threeShown = false;
    // Show 1 
    for (let i = 0; i < document.querySelectorAll(".box.one").length; i  ) {
      document.querySelectorAll(".box.one")[i].style.display = "inherit";
    }
    // Hide everything else than 1
    for (let i = 0; i < document.querySelectorAll(".box:not(.one)").length; i  ) {
      document.querySelectorAll(".box:not(.one)")[i].style.display = "none";
    }
  } else if (select.value == "two") {
    oneShown = false;
    twoShown = true;
    threeShown = false;
    // Show 2
    for (let i = 0; i < document.querySelectorAll(".box.two").length; i  ) {
      document.querySelectorAll(".box.two")[i].style.display = "inherit";
    }
    // Hide everything else than 2
    for (let i = 0; i < document.querySelectorAll(".box:not(.two)").length; i  ) {
      document.querySelectorAll(".box:not(.two)")[i].style.display = "none";
    }
  } else if (select.value == "three") {
    oneShown = false;
    twoShown = false;
    threeShown = true;
    // Show 3
    for (let i = 0; i < document.querySelectorAll(".box.three").length; i  ) {
      document.querySelectorAll(".box.three")[i].style.display = "inherit";
    }
    // Hide everything else than 3
    for (let i = 0; i < document.querySelectorAll(".box:not(.three)").length; i  ) {
      document.querySelectorAll(".box:not(.three)")[i].style.display = "none";
    }
  }
}

.flex-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
 }
 
 .box {
   width: 100px;
   height: 100px;
   margin: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 2rem;
   
 }
 
 .box.red {
   background: red;
 }
 
 .box.green {
   background: green;
 }
 
 .box.blue {
   background: blue;
 }

<select id="colorSelect" onchange="colorFilter(this)">
  <option disabled selected value="">Color</option>
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>

<select id="numberSelect" onchange="numberFilter(this)">
  <option disabled selected value="">Number</option>
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
</select>


<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >1</div>
  <div >2</div>
  <div >3</div>
</div>

Right now the selects overwrite each other, so they don't work together.

Also my code is super complex because I write out every possible combination by hand. There has to be a shorter version for this.

CodePudding user response：

You can attach the same event listener to both selects and set display properties of each box depending on the changed values of the number select and color select. PS: I tweaked HTML a little bit so it is easier to access box' variables (added data-color attribute for the color value and data-number attribute for the number value). In addition, I've changed numberSelect values from "one", "two" and "three" to "1", "2" and "3". Also, the code is 100% free of jQuery :-)

See the implementation below:

let colorSelect = document.getElementById('colorSelect');
let numberSelect = document.getElementById('numberSelect');
let boxWrapper = document.getElementById('boxWrapper');

function handleChange() {
  // Get new values for changed color
  // and changed number which user selected
  let changedColor = colorSelect.value;
  let changedNumber = numberSelect.value;
  
  // Get the list of all boxes inside our box wrapper div
  let boxes = boxWrapper.querySelectorAll('.box');
  
  // For each box check whether its display property
  // should be 'block' or 'none' based on changed values
  // in colorSelect and numberSelect
  boxes.forEach(box => {
    // Get color and number values from the current box
    let color = box.getAttribute('data-color');
    let number = box.getAttribute('data-number');
    
    // Check whether current box color and number values
    // comply to user changed values in selects
    let isColorValid = !changedColor || changedColor === color;
    let isNumberValid = !changedNumber || changedNumber === number;
    
    // If both color and number values comply - display the box
    // otherwise hide the box using display: none
    if (isColorValid && isNumberValid) {
        box.style.display = 'block';
    } else {
        box.style.display = 'none';
    }
  })
}

// Attach listeners to both colorSelect and numberSelect
colorSelect.addEventListener('change', () => handleChange());
numberSelect.addEventListener('change', () => handleChange());

.flex-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
 }
 
 .box {
   width: 100px;
   height: 100px;
   margin: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 2rem;
   
 }
 
 .box.red {
   background: red;
 }
 
 .box.green {
   background: green;
 }
 
 .box.blue {
   background: blue;
 }

<select id="colorSelect">
  <option disabled selected value="">Color</option>
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>

<select id="numberSelect">
  <option disabled selected value="">Number</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<div  id="boxWrapper">
  <div  data-color="red" data-number="1">1</div>
  <div  data-color="red" data-number="2">2</div>
  <div  data-color="red" data-number="3">3</div>
  <div  data-color="blue" data-number="1">1</div>
  <div  data-color="blue" data-number="2">2</div>
  <div  data-color="blue" data-number="3">3</div>
  <div  data-color="green" data-number="1">1</div>
  <div  data-color="green" data-number="2">2</div>
  <div  data-color="green" data-number="3">3</div>
</div>