title: Reusing single HTML select / drop down list for multiple table rows?
body: <p>I have an HTML table which is typically 10-30 rows long with a column for "item name". The drop down itself has around 75 products to choose from. To make the page size smaller, I wanted to reuse a single drop down list for every row.</p>
  
  <p>That is, when I click a row, jQuery should</p>
  
  <ol>
  <li>Read the item name in the TD</li>
  <li>Load the drop down list into the TD</li>
  <li>Select the active value as the previous text value</li>
  <li>On row exit, reverse the process</li>
  </ol>
  
  <p>The items in the drop down are populated from a database on page load. I'm thinking the best way is to keep the list hidden and only make it appear in that spot as needed. But I'm not sure how to accomplish step 2 and 3</p>
  
  <p><strong>Edit</strong></p>
  
  <p>Not sure what code you're looking for since that's what my question is. But if I had something like below, I need to put that hidden select list into the active row and make it select to the value already in the table cell.</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;Item Name&lt;/td&gt;
          &lt;td&gt;Item Value&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Product A&lt;/td&gt;
          &lt;td&gt;166.22&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Product B&lt;/td&gt;
          &lt;td&gt;166.22&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;select id="itemname" style="display:none;"&gt;
      &lt;option value="2231A22"&gt;Product A&lt;/option&gt;
      &lt;option value="2231A21"&gt;Product B&lt;/option&gt;
      &lt;option value="2231A20"&gt;Product B&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>Edit 2- Probable Solution</strong></p>
  
  <p>Based off one of the responses below, I poked around a bit and was able to create this script which works. Not sure if I can make it more efficient, but it does what I was looking for. The function takes "e" as a TD</p>
  
  <pre><code>    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();
          };
      }
  </code></pre>