Question

我基本上试图创建一个'方向'表单，每个'stop'都有一个地址输入和几个选择框选项。我希望能够'交换'表单，以便第一个'stop'的数据与第二个'stop'的数据交换。棘手的部分是可能有两个以上的“停止”，因此交换需要能够处理交换停止3-4,4-5,5-6等。

以下是基本表单模板：

<div class="forms">
<div class="address"><input type="text" /></div>
<div class="loc">
    <select name="region">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>
<div class="loc">
    <select>
        <option>a</option>
        <option>b</option>
        <option>c</option>
        <option>d</option>
        <option>e</option>
    </select>
</div>
</div>
<div class="swap"><a>swap</a></div>
<div class="forms">
<div class="address"><input type="text" /></div>
<div class="loc">
    <select name="region">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>
<div class="loc">
    <select>
        <option>a</option>
        <option>b</option>
        <option>c</option>
        <option>d</option>
        <option>e</option>
    </select>
</div>

我想尽可能使用JQuery，但我真的很难理解如何开始。

谢谢，布赖恩

Answer 1

一般来说，在jQuery中，您可以使用.val()设置输入的值，并根据其表单类型（下拉列表，文本输入，文本区域等）将其计算出来。

考虑到这一点以及您只需交换相邻值的要求，您可以像这样做：

$('.swap a').click(function() {
    //Swaps previous and next address values
    var prevAddress = $(this).parent().prev('.forms').find('.address input');
    var nextAddress = $(this).parent().next('.forms').find('.address input');
    var tmp = prevAddress.val();
    prevAddress.val(nextAddress.val());
    nextAddress.val(tmp);
});

这里我只完成了地址字段，但对于它们中的任何一个都应该大致相同。

The proof is in the fiddle.

Answer 2

这可能不是最好的方法，但它可以回答你的问题： http://jsfiddle.net/PBfvX/

注意：基于0的索引意味着如果你想要第一个和第二个形式，form1 = 0和form2 = 1

JQuery在两个或多个表单之间交换输入和选择框数据

2 个答案: