What is the simplest way to filter the content of a web page from a drop down menu?

问题

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

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.

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.)

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

回答1:

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

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";
    }
}

Try it here: http://jsfiddle.net/JsZ8S/

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/

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.

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

回答2:

You cannot do it with HTML alone. HTML defines a static document with static formatting. You need at least a little bit of JavaScript to dynamically change the page. Otherwise you have to create some sort of link or button that takes the browser to a new page with the desired changes. (This is about how the web worked for the first 5 or so years.)

A small about of JavaScript plus a library like jQuery should make this easy enough to do if you have any programming experience.

回答3:

HTML is used to just creating the markup and CSS is used to style it. There is no way you can do "filtering" in plain HTML. You will definitely need some JavaScript knowledge. Try your hands on jQuery and angularJS. They are really easy to learn and the documentation is pretty amazing.

来源：https://stackoverflow.com/questions/17098649/what-is-the-simplest-way-to-filter-the-content-of-a-web-page-from-a-drop-down-me

标签

javascript

html

drop-down-menu

org-mode