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

时间:2011-11-15 05:58:09

标签: javascript href multi-select

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

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

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

我不想使用菜单或列表,因为我正在尝试显示文本,每个链接包含文本的不同部分,章节中的某种类型的parragraphs,因此用户可以单击一个段落(这是一个链接,或至少看起来像一个)并将其值发送到其他页面,但我想要多个parragraphs,以便用户能够选择,如果可能的话,取消选择段落。

希望有人在可能的情况下指出正确的方向

2 个答案:

答案 0 :(得分:0)

以下是我实现此目的的方法:

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

答案 1 :(得分:-1)

传递多个值的最佳方式是通过表单提交或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>