Клонировать строку, содержащую выборки, и клонировать значения выборок - PullRequest
Новая
       16

Клонировать строку, содержащую выборки, и клонировать значения выборок

2 голосов
/ 17 сентября 2011

У меня есть этот HTML: 

<tr>
    <td>
        <input type="hidden" name="MatchId[]" value="">
        <select name="TeamId[]">
            <optgroup label="Women">
                <option value="18">Women 1</option>
                <option value="17">Women 2</option>
            </optgroup>
            <optgroup label="Men">
                <option value="9">Men 1</option>
                <option value="8">Men 2</option>
            </optgroup>
        </select>
    </td>
    <td>
        <select name="Day[]">
            <!-- blah -->
        </select>
    </td>
    <td>
        <input class="addButton" type="button" value="+">
    </td>
    <td>
        <input class="removeButton" type="button" value="-">
    </td>
</tr>

Я хотел бы клонировать строку, когда я нажимаю кнопку +, но также установить значение <select> равным исходному ряду.

Пока у меня есть этот код, который успешно клонирует строку, но оставляет новые поля <select> с первым значением в качестве выбора: 

$('.addButton').livequery('click', function()
{
    var $btn = $(this);

    var $clonedRow = $btn.closest('tr').clone();

    $btn.closest('tbody').append( $clonedRow );
});

Как я мог это сделать?

Редактировать: вспомогательный вопрос: как я могу установить фокус на первое поле клонированной строки после нажатия на кнопку +?

Ответы [ 3 ]

6 голосов
/ 17 сентября 2011

Вы можете сделать это вручную:

http://jsfiddle.net/Tp7hg/

$('.addButton').live('click', function()
{
    var $btn = $(this);
    var $row = $btn.closest('tr')

    var $clonedRow = $row.clone();
    $clonedRow.find("select").each(function(i){
        this.selectedIndex = $row.find("select")[i].selectedIndex;
    })

    $btn.closest('tbody').append( $clonedRow );
});
2 голосов
/ 17 сентября 2011

Попробуйте это с использованием элементов выбора selectedIndex

$('.addButton').live('click', function()
{
    var $btn = $(this);

    var $clonedRow = $btn.closest('tr').clone();

    var index = $('select', $btn.closest('tr')).prop('selectedIndex');

    $('select', $clonedRow).prop('selectedIndex', index);

    $btn.closest('tbody').append( $clonedRow );
});
1 голос
/ 17 сентября 2011

Вы можете передать функцию в val, которая дает индекс. Кроме того, я бы рекомендовал хранить объекты jQuery в переменной, чтобы вам не приходилось создавать их для каждого выбора. 

$('.addButton').live('click', function() {
    var $btn = $(this),
        $row = $btn.closest('tr'),
        $clonedRow = $row.clone();
        $selects = $row.find('select');

    $btn.closest('tbody').append($clonedRow);
    $clonedRow.find('select').val(function(index) {
        return $selects.eq(index).val();
    });
});
...