jQuery根据下拉列表中的选择将行移动到另一个表

Posted 2023-03-11

【中文标题】jQuery根据下拉列表中的选择将行移动到另一个表

【英文标题】：jQuery moving row to another table based on selection in dropdown

【发布时间】：2016-02-24 20:28:39

【问题描述】：

我有一个包含多个表格的页面（每个“活动类型”一个表格）。他们的 ID 是“活动类型”。每个表中的每一行都有一个带有下拉列表的单元格，允许用户选择他们想要将行移动到的新表的“活动类型”。

下面的 js 代码确实将一行从其原始表移动到在下拉菜单中选择的选定“活动类型”的表中。但是，移动该行后，下拉列表中的选定值仍保留为旧的“活动类型”。如何将下拉列表的值设置为该行现在所属的新“活动类型”？

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

【参考方案1】：

发生这种情况是因为“更改”事件从未在选择上完成，因为您正在从 DOM 中删除它。

你可以做两件事：

使用选择的开启模糊

就在您附加 TR 之前，您可以像这样设置您的选择值：

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

【讨论】：

谢谢，这行得通。但是，一旦将行移动到新表并在下拉列表中重新选择了正确的活动类型，如果我现在尝试选择不同的选项，则不会发生任何事情。这是因为 DOM 现在处于某种“分离”状态吗？我可以继续移动这一行吗？

Exactyl，我已经更改了我的答案以提出更好的事件绑定方式。

【参考方案2】：

您可以在克隆tr 之后和附加它之前执行类似操作吗？ tr.find('.override-activity').val(activityType)