How to create new row of selection when last current selection is changed?

Question

I'm trying to create more dynamic product and quantity picking method. So when you pick something, it will create a new selection row.. and when you select that, then it will again create a new row, over and over.

Basically the same method can be found in FaceBook, the poll system.

I have tried many different variations, but it doesn't work like desired. First codes created one row at start, but stopped working after that. Current code creates new rows, but only when the first one is changed.. It doesn't calculate the tr:last dynamically and Im all out of ideas.

This is what I have so far:

create_new_row = function () {
    var table = $('#products_table'),
        last_row = $(table).find('tr:last')
        last_row_select = $(last_row).find('select'),
        new_row = $(last_row).clone();

    // This part is brutal, could be optimized, but not a priority
    $(new_row).find('option:selected').removeAttr('selected');
    $(new_row).find('input[type="text"]').val(1);
    $(new_row).appendTo($(table));
};

$('#products_table tr:last select').change(function () {
    create_new_row();
});

^{[View output]}

My last resort probably is that, I will use classes that set the correct last row. But that means, when the form is posted, PHP-side must also do that. This is not the solution I would like to use.

You're assigning the change event to the last row of your table and it stays attached to that row. If you want to move the event off of that row, you'd need to remove the event from it and then update it so that that new last row gets the change event. — j08691, Feb 06 '12 at 20:12

score 3 · Accepted Answer · answered Feb 06 '12 at 20:11

3

Use .live() or if you have the more current version of jQuery, use .on (I'll post an example with .live() as it works with both)

create_new_row = function () {
    var table = $('#products_table'),
        last_row = $(table).find('tr:last')
        last_row_select = $(last_row).find('select'),
        new_row = $(last_row).clone();

    // This part is brutal, could be optimized, but not a priority
    $(new_row).find('option:selected').removeAttr('selected');
    $(new_row).find('input[type="text"]').val(1);
    $(new_row).appendTo($(table));
};

$('#products_table tr:last select').live('change', function () {
    create_new_row();
});

Working Example here!

answered Feb 06 '12 at 20:11

Madara's Ghost

172,118
50
264
308

YES! Of course, perfect, works like desired and also I can make my old optimized code work :) Ty – Kalle H. Väravas Feb 06 '12 at 20:14
hmm but it wont change if you select bikes. OP might want to make a blank as the first selection. – Laurence Burke Feb 06 '12 at 20:15
Not a problem. As there should be the first option "Choose Product". Though, I guess a solution for the later generations would be nice. EDIT: Though, then again for this kind of wizard you MUST have the "Choose Product" for the first one, or you will be forced to buy Bikes aswell. So thats my bad on creating the example options. – Kalle H. Väravas Feb 06 '12 at 20:18
@KalleH.Väravas NP rookie mistake but yeah usually its always good to have a first placeholder selection for a dropdownlist – Laurence Burke Feb 06 '12 at 20:21

How to create new row of selection when last current selection is changed?

1 Answers1

Linked