使用多个链接发布或获取多个值答案

【问题标题】：post or get multiple values with multiple links使用多个链接发布或获取多个值
【发布时间】：2011-11-15 05:58:09
【问题描述】：

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

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

<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 发送这些选定的值。

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

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

【问题讨论】：

标签： javascript href multi-select

【解决方案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/

【讨论】：

【解决方案2】：

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

这是一个示例：Sample



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

【讨论】：