通过多个链接发布或获取多个值

Question

我是新手，所以请耐心等待...

我希望能够使用链接将多个变量传递到另一个页面，例如：

<a href="value1">some text</a>,<a href="value2">some text2</a>,<a href="value3">some text3</a>,<a href="value4">some text4</a>

我希望能够将其用作“多重选择器”，以便用户将能够单击（选择）他们想要的任何文本，并以某种方式使用提交按钮通过 post 或 get 发送这些选定的值。

我不想使用菜单或列表，因为我试图显示文本，并且每个链接包含文本的不同部分，例如章节中的段落，因此用户会单击一个段落（这是一个链接，或者至少看起来像一个）并将其值发送到其他页面，但是我想要多个段落，以便用户能够选择段落，如果可能的话取消选择段落。

如果可能的话希望有人能指出我正确的方向

Answer 1

以下是我可能如何实现这一点：

HTML：

<a data-id="value1" href="value1">some text</a>,<a data-id="value2" href="value2">some text2</a>,<a data-id="value3" href="value3">some text3</a>,<a data-id="value4" href="value4">some text4</a>
<input type="button" id="submit" value="submit"></input>

Javascript：

var els = document.getElementsByTagName("a");
var sz = els.length;

var o = {};
for(var n = 0; n < sz; ++n) {
    els[n].onclick = function(e) {
        e.preventDefault();
        var s = e.currentTarget.getAttribute("data-id");
        if(o[s] !== undefined) {
            delete o[s];
        } else {
            o[s] = "";
        }
    };
}
document.getElementById("submit").onclick = function(e) {
    var s = "";
    for(key in o) {
        s += key + "&";
    }
    var location = s.substring(0, s.length-1);
    // redirect user using location as parameter list or send ajax request
};

（我在上面使用地图而不是数组，以避免每次点击时都必须遍历数组）

http://jsfiddle.net/5y7wK/

Answer 2

传递多个值的最佳方法是通过表单提交或 AJAX 请求，您可以有多个复选框，以便当用户选择所需的值然后在单个请求中发送它们时。

这是一个示例：示例

<form action="/myurl" method="POST">
        <input id="Val1" name="paragraph" type="checkbox" value="value1"/>
        <label for="Val1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        In egestas tempus dictum. Mauris purus urna, congue non scelerisque non,
        feugiat at arcu. Donec venenatis facilisis fermentum. Morbi ac lorem odio. 
        Cras nulla justo, pharetra et placerat ut, sagittis nec urna. 
        Praesent luctus, sem ac lobortis aliquam, purus sapien tempor dui, nec 
        pretium metus leo eu ligula. Cras ac egestas dolor. 
        </label>
        </br>
        </br>
        <input id="Val2" name="paragraph" type="checkbox" value="value2"/>
        <label for="Val2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        In egestas tempus dictum. Mauris purus urna, congue non scelerisque non,
        feugiat at arcu. Donec venenatis facilisis fermentum. Morbi ac lorem odio. 
        Cras nulla justo, pharetra et placerat ut, sagittis nec urna. 
        Praesent luctus, sem ac lobortis aliquam, purus sapien tempor dui, nec 
        pretium metus leo eu ligula. Cras ac egestas dolor. </label>
        </br>
        <input type="submit"/>
    </form>