列表过滤器功能失效，需实现基于<select>值（0/1）的列表过滤

我看你这段代码里的问题主要出在两个地方：一是<li>元素本身没有value属性，你直接拿elements[i].value肯定拿不到正确的值；二是原代码里没写过滤后的显示/隐藏逻辑，就算拿到了匹配值也没法控制元素显示。

我给你调整一下代码，实现你要的功能：

首先是HTML结构（需要给列表项加自定义数据属性存匹配值） #

<select id="select">
  <option value="0">显示值为0的元素</option>
  <option value="1">显示值为1的元素</option>
</select>

<ul id="listElements">
  <li data-value="0">这是值为0的元素</li>
  <li data-value="1">这是值为1的元素</li>
  <li data-value="0">另一个值为0的元素</li>
  <li data-value="1">另一个值为1的元素</li>
</ul>

然后是修复后的JavaScript代码 #

function filterElements() {
  var select = document.getElementById("select");
  var filter = select.value;
  var list = document.getElementById("listElements");
  var elements = list.getElementsByTagName("li");
  
  // 用let避免var的作用域问题，同时修复原代码的拼写错误
  for (let i = 0; i < elements.length; i++) {
    // 从自定义属性data-value里获取元素的匹配值
    var valueElement = elements[i].dataset.value;
    console.log(`filter : ${filter} ; value : ${valueElement}`);
    
    // 比较值，控制元素显示或隐藏
    if (valueElement === filter) {
      elements[i].style.display = "block";
    } else {
      elements[i].style.display = "none";
    }
  }
}

// 给select控件绑定change事件，选值变化时自动触发过滤
document.getElementById("select").addEventListener("change", filterElements);

// 页面加载时先执行一次过滤，默认显示对应选项的元素
window.onload = filterElements;

关键修复点说明： #

• 给<li>添加data-value属性：这是HTML5标准的自定义数据属性，用来存储元素的匹配值，比用非标准的value属性更可靠
• 修正获取值的方式：用elements[i].dataset.value来获取自定义属性的值，替代原代码里无效的elements[i].value
• 补充显示/隐藏逻辑：通过设置style.display来控制元素是否可见，这是过滤功能的核心部分
• 绑定change事件：让用户切换选项时自动触发过滤，不用手动调用函数，体验更流畅
• 修复拼写错误：原代码里的valueEleme少了个nt，现在修正为valueElement，避免控制台报错

这样调整后，你的列表过滤器应该就能正常工作啦～

内容的提问来源于stack exchange，提问作者JacopoStanchi