javascript - 为多个表格行重用单个 HTML 选择/下拉列表？

Question

我有一个 HTML 表格，通常有 10-30 行长，其中有一列是“项目名称”。下拉列表本身有大约 75 种产品可供选择。为了缩小页面大小，我想为每一行重复使用一个下拉列表。

也就是说，当我点击一行时，jQuery 应该

1. 阅读TD中的项目名称
2. 将下拉列表加载到 TD
3. 选择事件值作为之前的文本值
4. 在行退出时，反转过程

下拉列表中的项目是在页面加载时从数据库中填充的。我在想最好的方法是隐藏列表，只在需要时让它出现在那个地方。但我不确定如何完成第 2 步和第 3 步

编辑

不确定您要查找的代码是什么，因为这就是我的问题。但是，如果我有如下所示的内容，我需要将该隐藏的选择列表放入事件行并使其选择表格单元格中已有的值。

<table>
    <tr>
        <td>Item Name</td>
        <td>Item Value</td>
    </tr>
    <tr>
        <td>Product A</td>
        <td>166.22</td>
    </tr>
    <tr>
        <td>Product B</td>
        <td>166.22</td>
    </tr>
</table>

<select id="itemname" style="display:none;">
    <option value="2231A22">Product A</option>
    <option value="2231A21">Product B</option>
    <option value="2231A20">Product B</option>
</select>

编辑 2- 可能的解决方案

根据下面的一个回复，我仔细研究了一下，并能够创建这个有效的脚本。不确定我是否可以提高它的效率，但它可以满足我的需求。该函数将“e”作为TD

    function addItem(e) {
        if ($(e).find('select').length) {
            var input = $(e).find('select').eq(0);
            $(e).text($(input).val());
            $(input).appendTo($('.promotion-header'));
        }
        else {
            var text = $(e).text();
            $(e).text('');
            $('#itemname').appendTo(e).val(text).show();
        };
    }

Answer 1

尝试将主 div 的所有元素复制到所有其他 div，方法是使用 .html() 方法设置和获取 html。在演示中，myDropDownListDiv 中的所有元素都被复制到 anotherDiv。

HTML :

<div id="myDropDownListDiv"><select id="itemname">
    <option value="2231A22">Product A</option>
    <option value="2231A21">Product B</option>
    <option value="2231A20">Product B</option>
</select>
</div>
    <div id="anotherDiv">
</div>

jQuery :

$(document).ready(function(){
    //copies all contents of myDropDownListDiv into anotherDiv
    $("#anotherDiv").html($("#myDropDownListDiv").html());
});

Demo