Clone a row containing selects, and clone selects' values

Question

I have this 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>

I would like to clone the row when I click on the + button, but also set the value of the <select> to be the same as the original row.

For now, I have this code, which successfully clones the row, but leaves the new <select> fields with the first value as a selection:

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

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

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

How could I do that?

Edit: subsidiary question: how could I set the focus on the first field of the cloned row after I click on the + button?

score 6 · Accepted Answer · answered Sep 16 '11 at 20:41

6

You can do it manually:

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

answered Sep 16 '11 at 20:41

Joseph Marikle

76,418
17
112
129

Thanks to both of you. I had found the answer in the same time here http://stackoverflow.com/questions/742810/clone-isnt-cloning-select-values – Emidee Sep 16 '11 at 20:46
@Joseph, Mike, and well... everyone - The only other option that I can think of would be to use val itself. I'll post an answer using that method. – natedavisolds Sep 16 '11 at 20:51

score 2 · Answer 2 · answered Sep 16 '11 at 20:42

Try this with using the select elements 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 );
});

score 1 · Answer 3 · answered Sep 16 '11 at 20:49

1

You can pass a function into val which gives the index. Also, I'd recommend storing the jQuery objects in a variable so you don't have to build it for each select.

$('.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();
    });
});

answered Sep 16 '11 at 20:49

natedavisolds

4,305
1
20
25

nice! I'll have to remember you can pass a function to val. Is it that way for most jQuery methods? (only other one I've seen it on is filter). – Joseph Marikle Sep 16 '11 at 20:54
@Joseph - yes, most of this kind of jQuery object has a function that you can pass in. It is very handy and hardly used. – natedavisolds Sep 17 '11 at 02:21

Clone a row containing selects, and clone selects' values

3 Answers3