Javascript 用于在HTML中筛选元素的下拉框

我想使用下拉框过滤div框中的文档。我使用脚本为每个元素指定了a或b，并将其隐藏起来。其思想是显示从下拉筛选框中选择的任何元素

代码：

功能切换元素（id）{
if（document.getElementById（id）.style.display=='none'）
{
document.getElementById（id）.style.display=''；
}
其他的
{
document.getElementById（id）.style.display='none'；
}
}

---

如果更容易可视化，这里有一个JSFIDLE，其中包含代码：

首先，您不能在多个元素中使用相同的id，就像您处理div标记一样：

<div id="a" style="display:none"><a href="/wp-content/uploads/2014/02/Updating-WP-Content.docx">A</a> <br></div>
<div id="b" style="display:none"><a href="/wp-content/uploads/2014/02/Updating-WP-Content.docx">B</a> <br></div>
<div id="a" style="display:none"><a href="/wp-content/uploads/2014/02/Updating-WP-Content.docx">A</a> <br></div>
<div id="a" style="display:none"><a href="/wp-content/uploads/2014/02/Updating-WP-Content.docx">A</a> <br></div>
<div id="b" style="display:none"><a href="/wp-content/uploads/2014/02/Updating-WP-Content.docx">B</a> <br></div>
<div id="a" style="display:none"><a href="/wp-content/uploads/2014/02/Updating-WP-Content.docx">A</a> <br></div>

尝试使用类，您可以将多个元素引用到同一个类。我已经在JSFIDLE中对您的代码做了一些更改，使其能够根据您的规范工作。如果这是您想要的，请告诉我

---

JSFiddle:

哇！这就是我一直试图做的一切，谢谢你花这么多时间和精力为我解决它。还有一个问题：如何使所有内容都默认为可见，并且仅在与下拉选项无关时隐藏？（一些提示就足够了，我想自己尝试解决这个问题）@user3219859如果您想让所有内容在默认情况下都可见，只需将div标记中的display属性更改/设置为display:'block'而不是'none'。这样，当页面加载时，它们都是可见的，但用户可以选择根据dropdownlist选择过滤它们。

<div id="a" style="display:none"><a href="/wp-content/uploads/2014/02/Updating-WP-Content.docx">A</a> <br></div>
<div id="b" style="display:none"><a href="/wp-content/uploads/2014/02/Updating-WP-Content.docx">B</a> <br></div>
<div id="a" style="display:none"><a href="/wp-content/uploads/2014/02/Updating-WP-Content.docx">A</a> <br></div>
<div id="a" style="display:none"><a href="/wp-content/uploads/2014/02/Updating-WP-Content.docx">A</a> <br></div>
<div id="b" style="display:none"><a href="/wp-content/uploads/2014/02/Updating-WP-Content.docx">B</a> <br></div>
<div id="a" style="display:none"><a href="/wp-content/uploads/2014/02/Updating-WP-Content.docx">A</a> <br></div>