我希望能够允许用户从下拉菜单中“过滤”HTML 页面的内容。
我的编码技能很少，但维护一个使用 Emacs org-mode 生成的简单网站。 （易于组装页面并使用标签生成相同内容的不同版本。）输出是简单的 HTML。
我可以轻松地生成页面的不同版本，并通过下拉菜单在它们之间移动来选择它们，但这意味着我的网站上有相同内容的不同版本，这会使搜索引擎的检索变得混乱。
理想情况下，我希望用户 A 能够选择查看整个页面，用户 B 可以查看其中的一部分，而用户 C 可以查看除了一小部分之外的大部分内容。这是为了方便用户（不是为了安全等）
最简单的实现方式是什么？我意识到 Web 开发人员可能会使用 Ajax 等，但那不是我。
【问题讨论】：
标签： javascript html drop-down-menu org-mode
听起来您可以使用基于下拉 SELECT 的某些 DIV 显示/隐藏页面部分。
为此，您将要过滤的内容包装在一些 DIV 中，并创建一个 JavaScript 函数，该函数根据 SELECT 的 value 属性“过滤”显示的内容。
这是一个简单的例子：
HTML
<select id="myDropdown" onchange="filterContent();">
<option value="A">All content</option>
<option value="B">Some content</option>
<option value="C">Little content</option>
</select>
<div id="contentA">
** Content A ***
</div>
<div id="contentB">
** Content B ***
</div>
<div id="contentC">
** Content C ***
</div>
JavaScript
function filterContent() {
var user = document.getElementById("myDropdown").value;
var contentA = document.getElementById("contentA");
var contentB = document.getElementById("contentB");
var contentC = document.getElementById("contentC");
if(user=="A") {
contentA.style.display="block";
contentB.style.display="block";
contentC.style.display="block";
} else if (user=="B") {
contentA.style.display="none";
contentB.style.display="block";
contentC.style.display="block";
} else if (user=="C") {
contentA.style.display="none";
contentB.style.display="none";
contentC.style.display="block";
}
}
在这里试试：http://jsfiddle.net/JsZ8S/
这是另一个示例，其中包含多个不同部分，可以根据选择显示或隐藏。请注意，用于 ID 的方案是 contentA1、contentA2 等。字母是用户，字母后面的数字是序列，因为 ID 必须是唯一的。还要注意 JavaScript 代码的区别——因为我们有更多的部分，我们必须考虑在 if/else 块中显示和隐藏它们：http://jsfiddle.net/JsZ8S/2/
如果你准备好使用 jQuery，另一个例子是使用类。如果您发现您正在创建大量部分并且厌倦了跟踪 ID，您可能想要使用类。在这种情况下，类就像您可以反复使用的 ID 一样工作。您使用class="contentA" 标记您希望向所有用户（用户A）显示的任何部分，使用class="contentB" 标记用户A 和B 的任何区域，其他所有内容都保持未标记。在这一点上这开始变得有点不简单，但看看你的想法。
这是一个使用类的示例（需要 jQuery）：http://jsfiddle.net/JsZ8S/5/
【讨论】：
您不能仅使用 HTML 来做到这一点。 HTML 定义了具有静态格式的静态文档。您至少需要一点 JavaScript 才能动态更改页面。否则，您必须创建某种链接或按钮，将浏览器带到具有所需更改的新页面。 （这是关于网络在前 5 年左右的工作方式。）
如果你有任何编程经验的话，一点点 JavaScript 加上一个像 jQuery 这样的库应该可以很容易地做到这一点。
【讨论】：
HTML 用于创建标记，而 CSS 用于设置样式。您无法在纯 HTML 中进行“过滤”。你肯定需要一些 JavaScript 知识。试试 jQuery 和 angularJS。它们真的很容易学习，而且文档非常棒。
【讨论】：