JQuery для обмена данными ввода и выбора между двумя или более формами

Question

Я в основном пытаюсь создать форму «направления», где каждая «остановка» имеет адрес ввода и пару опций выбора. Я хочу иметь возможность «поменять» формы так, чтобы данные из первого «стопа» менялись местами с данными из второго «стопа». Сложность в том, что может быть более двух «остановок», поэтому своп должен быть в состоянии справиться с обменом остановок 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

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);
});

Здесь я только сделал поле адреса, но оно должно быть примерно одинаковым для любогоиз них.

Доказательство в скрипке.

Answer 2

Возможно, это не лучший способ, но он отвечает на ваш вопрос: http://jsfiddle.net/PBfvX/

Примечание: индексирование на основе 0 означает, что если вы хотите первую и вторую форму, form1 = 0 и form2 = 1