重複使用多個表格行的單個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中的所有元素，以通過設置和從得到的.html HTML（）方法，使用所有其他分區。在演示中，myDropDownListDiv中的所有元素都被複制到另一個區域。

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