javascript/jquery clone not working in dropdown list

Question

I asked a question in the last post that i want rows to be dynamically generated and the data should be copied in the new row. it is working fine but only for text fields. but i also have dropdown in my form and it isn't showing the last row's selected options in new row. this was my question add previous row data to dynamically generated row

i have html code :

<form>
    <table border="1" id="engagements">
        <tr>
            <th>
                <input type="checkbox" onclick="checkAll(this)" />
            </th>
            <th>Organization</th>
            <th>Project</th>
            <th>Product</th>
            <th>Activity</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" onclick="checkAll(this)" />
            </td>
            <td>
                <select>
                    <option value = "1">One</option>/>
                     <option value = "1">two</option>/>
            </td>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
        </tr>
    </table>
    <select name="mode" id="mode">
        <option value="">Add More Rows with Same Data as Above</option>
        <option value="1">1 More</option>
        <option value="2">2 More</option>
        <option value="3">3 More</option>
        <option value="4">4 More</option>
        <option value="5">5 More</option>
    </select>
</form>

and script code :

$("#mode").on('change', function () {
    var rows = parseInt(this.value);
    console.log(rows);
    var lastRow;
    for (var i = 0; i < rows; i++) {
        lastRow = $('#engagements tr').last().clone();
        $('#engagements tr').last().after(lastRow);
    }
});

JS fiddle: http://jsfiddle.net/jW6eL/3/

stackoverflow.com/a/743871/2220391 and stackoverflow.com/a/4599828/2220391 — Spokey
– Spokey, Commented Jun 24, 2013 at 11:20

animuson · Accepted Answer · 2013-07-23 05:20:11Z

3

for performance reasons, jquery doesn't keep selection while making clone of an element. However, you can try using

    .clone(true)

this will copy all evens and data with drop down. this way you may use events and and select last option in the drop down.

edited Jul 23, 2013 at 5:20

animuson♦

54.9k28 gold badges142 silver badges150 bronze badges

answered Jul 22, 2013 at 13:55

imonweb

312 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sangram parmar · Accepted Answer · 2013-06-24 13:30:57Z

2

try this

http://jsfiddle.net/jW6eL/7/

$("#mode").on('change', function () {
    var rows = parseInt(this.value);
    console.log(rows);
    var lastRow;
    for (var i = 0; i < rows; i++) {
        lastRow = $('#engagements tr').last().html();
        $('#engagements tr:last').after('<tr>'+lastRow+'</tr>');
        $('#engagements tr:last').find('select').each(function(){
            var this_select=$(this);
            this_select.val(this_select.closest('tr').prev().find('td:eq('+this_select.closest('td').index()+')').find('select').val())
        })
    }
});

edited Jun 24, 2013 at 13:30

answered Jun 24, 2013 at 11:31

sangram parmar

8,7862 gold badges26 silver badges48 bronze badges

1 Comment

Shauzab Ali Rawjani Over a year ago

this is only working in the first ddl but i have 5 ddl's in the form

Collectives™ on Stack Overflow

javascript/jquery clone not working in dropdown list

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related