JQuery交換兩種或多種形式之間的輸入和選擇框數據

我基本上試圖創建一個'方向'的形式，每個'停止'有一個地址輸入和幾個選擇框選項。我希望能夠「交換」表格，以便第一個「停止」的數據與第二個「停止」的數據交換。棘手的部分是可能有兩個以上的「停止」，所以交換需要能夠處理交換停止3-4，4-5，5-6等。JQuery交換兩種或多種形式之間的輸入和選擇框數據

這裏是基本形式模板：

<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，但我真的難倒如何開始。

感謝，布賴恩

來源

2011-04-12 brianandrich

你好，根據你的源代碼，什麼是「停止」？另一件事是，我看不到一個表格。我只能看到只有兩個div的CSS類'窗體'。一般而言，「表格」由

標籤聲明。你究竟想要交換什麼？你想用選擇列表來做到這一點嗎？ – reporter 2011-04-12 14:27:13

此代碼嵌套在

如果你想使用jQuery，我認爲有一種方法（理論上）。 Jquery包含一個函數調用「.append（）」。在特殊情況下，這個人可以移動元素。 Perhapbs它存在一個更好的方法。查看Jquery的api，'Manupulation'一節。 – reporter 2011-04-12 14:43:14

一般在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.

來源

2011-04-12 14:42:59

謝謝！這工作完美。我解構它來弄清楚它是如何工作的 - 超酷！ – brianandrich 2011-04-12 16:13:44

這可能不是最好的方式，但它回答你的問題： http://jsfiddle.net/PBfvX/

注：0基於索引意味着如果你想在第一和第二窗體Form1 = 0和窗口2 = 1

來源

2011-04-12 14:57:16 Calum

JQuery交換兩種或多種形式之間的輸入和選擇框數據

回答

相關問題