使用条件 html 选择显示/隐藏页面上的元素

Question

这很可能是重复的，但我找不到对我有帮助的片段

我有一个包含多个图像和两个 select 字段的页面。我想根据用户的 selection 显示不同的图像。对于个人 selects 这很容易，但是我怎样才能以简单的方式实现两个 selects 之间的依赖关系？

示例：
页面上的项目：“A B”、“A”、“B”
用户select离子：
第一个select：A
第二个select：B
结果：“A B”

用户select离子：
第一个select：A
第二个select：空
结果：“A”

我想你明白了。

我发现的几个片段是用 jQuery 制作的，我真的很想避免 jQuery 并且只使用 vanilla JS。

我目前的做法：

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 class="flex-wrapper">
  <div class="box red one">1</div>
  <div class="box red two">2</div>
  <div class="box red three">3</div>
  <div class="box blue one">1</div>
  <div class="box blue two">2</div>
  <div class="box blue three">3</div>
  <div class="box green one">1</div>
  <div class="box green two">2</div>
  <div class="box green three">3</div>
</div>

现在 select 会互相覆盖，所以它们不能一起工作。

我的代码也非常复杂，因为我手写了所有可能的组合。必须有一个更短的版本。

Answer 1

您可以将相同的事件侦听器附加到两个 select 并根据数字 select 和颜色 select 的更改值设置每个框的显示属性。 PS：我稍微调整了 HTML 以便更容易访问框的变量（为颜色值添加了 data-color 属性，为数值添加了 data-number 属性）。此外，我已将 numberSelect 值从“一”、“二”和“三”更改为“1”、“2”和“3”。此外，代码 100% 不含 jQuery :-)

参见下面的实现：

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 class="flex-wrapper" id="boxWrapper">
  <div class="box red" data-color="red" data-number="1">1</div>
  <div class="box red" data-color="red" data-number="2">2</div>
  <div class="box red" data-color="red" data-number="3">3</div>
  <div class="box blue" data-color="blue" data-number="1">1</div>
  <div class="box blue" data-color="blue" data-number="2">2</div>
  <div class="box blue" data-color="blue" data-number="3">3</div>
  <div class="box green" data-color="green" data-number="1">1</div>
  <div class="box green" data-color="green" data-number="2">2</div>
  <div class="box green" data-color="green" data-number="3">3</div>
</div>

使用条件 html 选择显示/隐藏页面上的元素

Show/ hide elements on page with conditional html selects

html

javascript

css

select

drop-down-menu