CODEWITHSUNDEEP
javascriptjqueryhtml
illya
illya

Reputation: 407

jQuery moving row to another table based on selection in dropdown

I have a page with multiple tables (one table per "Activity Type"). Their IDs are the "Activity Types". Each row in each table has a cell with a dropdown that allows users to select the "Activity Type" of the new table they'd like to move the row to.

The below js code does move a row from its original table to the table of the selected "Activity Type" chosen in the dropdown menu. However, after the row is moved, the selected value in the dropdown remains as the old "Activity Type". How do I go about setting the value of the dropdown to the new "Activity Type" that the row now belongs to?

$('.override-activity').change(function () {
    // get selected Activity Type
    var activityType = $("option:selected", this).text().replace(/\s+/g, '');

    // get selected row
    var tr = $(this).closest("tr").remove().clone();

    // insert selected row into new Activity Type table
    $("#" + activityType).find("table").append(tr);
});

Upvotes: 0

Views: 611

Answers (2)

Mathieu de Lorimier
Mathieu de Lorimier

Reputation: 1015

This is happening because the "change" event never completes on the select since you are removing it from the DOM.

You could do 2 thigs :

  1. Use the on blur of the select

  2. Just before you append the TR, you could set the value of your select like so :

    $(document).on('change', '.override-activity', function () {
    // get selected Activity Type
    var activityType = $("option:selected", this).text().replace(/\s+/g, '');

    // Get the original selected value
    var selected = $(this).val();

    // get selected row
    var tr = $(this).closest("tr").remove().clone();

    // Reset the value
    $('.override-activity', tr).val(selected);

    // insert selected row into new Activity Type table
    $("#" + activityType).find("table").append(tr);
});

Upvotes: 2

ken4z
ken4z

Reputation: 1390

Could you do something like after where you clone the tr and before you append it. tr.find('.override-activity').val(activityType)

Upvotes: 0

Related Questions