JQuery да превключвате входните и избирателните полета между две или повече формуляри - jquery, forms, swap

По принцип се опитвам да създам "упътвания"формуляр с всяко „спиране“ с въвеждане на адрес и няколко опции в полето за избор. Искам да мога да "разменям" формулярите, така че данните от първата "стоп" да ​​се разменят с данните от втората "стоп". Сложната част е, че би могло да има повече от две „стопове“, така че суапът ще трябва да може да се справя със сменяемите спирания 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, ако е възможно, но наистина съм препънат как да започнете.

Благодаря, Brian

Отговори:

Като цяло в 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);
});

Тук направих само адресното поле, но то трябва да бъде приблизително същото за всеки от тях.

Доказателството е във фиталата.

Това може да не е най-добрият начин, но той отговаря на вашия въпрос: http://jsfiddle.net/PBfvX/

Забележка: Индексирането въз основа на 0 означава, ако искате първата и втората форма, form1 = 0 и form2 = 1