从下拉菜单中过滤网页内容的最简单方法是什么？ [英] What is the simplest way to filter the content of a web page from a drop down menu?

问题描述

我希望能够允许用户从下拉菜单中过滤 HTML页面的内容。

I would like to be able to allow a user to "filter" the contents of an HTML page from a drop down menu.

我的编码技巧最低，但是维护使用Emacs org-mode制作的简单网站。 （易于组装页面并使用标签产生相同内容的不同版本。）输出为简单的HTML。

I have minimal coding skills but maintain a simple website produced using Emacs org-mode. (easy to assemble pages and produce different versions of the same content using tags.) The output is simple HTML.

我可以轻松生成页面的不同版本，并通过下拉菜单在页面之间进行选择，从而使它们成为可选内容，但这意味着我在同一内容上具有不同版本

I can easily produce different versions of a page and make them selectable with a drop down menu to move between them, but this means I have different versions of the same content on my website, which makes retrieval from search engines confusing.

理想情况下，我希望用户A可以选择查看整个页面，用户B可以选择其中的一部分用户C可以看到大部分内容，只有一小部分。这是给用户带来的便利（不是出于安全性等原因）。

Ideally, I would like user A to be able to select to see the whole page, user B to see some of it, and user C to see most of it except a small portion. This is a convenience to the users (not for security, etc.)

实现此目标的最简单方式是什么？我意识到Web开发人员可能会使用Ajax等，但这不是我。

What is the simplest way of implementing this? I realize a web developer would probably use Ajax, etc., but that's not me.

推荐答案

听起来像您可以利用的根据下拉SELECT显示/隐藏页面的某些DIV。

Sounds like you could make use of showing/hiding sections of the page with some DIVs based on a drop down SELECT.

为此，您将要过滤的内容包装在某些DIV中，并创建了一个JavaScript函数，该函数根据显示的value属性来过滤显示的内容选择。

To do this, you wrap the content that you want to filter in some DIVs and create a JavaScript function that "filters" the displayed content based on the value attribute of the SELECT.

这里是一个简单的示例：

Here is a simple example:

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/

Here is another example with multiple different sections that can be shown or hidden based on the selection. Note that the scheme used for IDs is contentA1, contentA2, etc. the letter being the user and the number after the letter is the sequence since IDs must be unique. Also note the difference in the JavaScript code - because we have more sections, we have to account for showing and hiding them in the if/else block: http://jsfiddle.net/JsZ8S/2/

如果您准备使用jQuery，则可以使用类。如果您发现要创建许多部分并且厌倦了跟踪ID，则可能要使用类。在这种情况下，类的工作方式类似于可以反复使用的ID。您可以使用 class = contentA 标记要显示给所有用户（用户A）的任何部分，使用 class =标记用户A和B的任何区域。 contentB 和其他所有内容都保持不变。这一点开始变得有些简单，但是请看您的想法。

In case you are ready to use jQuery another example is using classes. If you find that you are creating numerous sections and are tired of keeping track of IDs, you might want to use classes. Classes in this case, work like IDs that you can use again and again. You mark any section you want displayed to all users (user A) with class="contentA", any area for users A and B with class="contentB" and everything else just leave unmarked. This is starting to get a bit un-simple at this point but see what you think.

这里是一个使用类的示例（需要jQuery）： http://jsfiddle.net/JsZ8S/5/

Here is an example (requires jQuery) using classes: http://jsfiddle.net/JsZ8S/5/

这篇关于从下拉菜单中过滤网页内容的最简单方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！