Vanilla JS列表选择/隐藏数组

// HTML
<select id="list">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<div id="arrayElements">
  <div class="element option1">Element 1</div>
  <div class="element option2">Element 2</div>
  <div class="element option3">Element 3</div>
</div>

// JavaScript
document.getElementById('list').addEventListener('change', function() {
  var selectedValue = this.value;
  var elements = document.getElementsByClassName('element');
  
  // 隐藏所有数组元素
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.display = 'none';
  }
  
  // 显示与选择值匹配的数组元素
  var selectedElements = document.getElementsByClassName(selectedValue);
  for (var j = 0; j < selectedElements.length; j++) {
    selectedElements[j].style.display = 'block';
  }
});