如何仅显示与下拉列表选中项匹配的HTML元素

你遇到的问题根源在于：document.querySelectorAll()返回的是NodeList对象，直接把它赋值给document.body.innerHTML时，JavaScript会自动将这个对象转换为字符串，结果就显示出了"NodeList"文本。而且这种写法还会把页面里的下拉框（select元素）一并删掉，完全偏离了需求。

正确的做法是通过控制元素的显示/隐藏来实现筛选，而非替换整个body内容。以下是修复后的代码：

修复后的JavaScript代码 #

const listOperations = document.querySelector('#elements');
listOperations.addEventListener('change', () => {
  const selectedValue = listOperations.value;
  const allDivs = document.querySelectorAll("body > div");
  
  allDivs.forEach(div => {
    // 判断当前div是否匹配选中的值
    const isMatch = div.classList.contains(`element${selectedValue}`);
    div.style.display = isMatch ? 'block' : 'none';
  });
});

对应HTML代码（保持原结构即可） #

<div class="element1">
  <p>
    this is element 1
  </p>
</div>
<div class="element2">
  <p>
    this is element 2
  </p>
</div>
<div class="element3">
  <p>
    this is element 3
  </p>
</div>
<div class="element1">
  <p>
    this is element 1
  </p>
</div>
<div class="element2">
  <p>
    this is element 2
  </p>
</div>
<div class="element3">
  <p>
    this is element 3
  </p>
</div>
<select id="elements">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

逻辑说明 #

• 下拉框值变化时，遍历所有目标div元素
• 根据选中的值，检查div的类名是否匹配（比如选3时，仅显示带element3类的div）
• 通过设置style.display控制元素显隐，既保留了下拉框，也不会出现奇怪的文本

内容的提问来源于stack exchange，提问作者bouteffah touiki anas