title: How to select multiple columns with JQuery to populate another control on page
body: <p>I have a page with an HTML table and a select element. I want to use jQuery to extract two columns each row of the able, and add the columns as entries in the select list. For example, if my table is:</p>
  <p>1   apple   extra
  2   banana  extra
  3   cherry  extra</p>
  <p>Then when the page loads I would like to add three labels to the select, one for each fruit name, with the corresponding values determined by the first column. I have unsuccessfully attempted to solve this at <a href="http://jsfiddle.net/dcodelli/7Ez9d/" rel="nofollow noreferrer">http://jsfiddle.net/dcodelli/7Ez9d/</a></p>
  <p>My code:</p>
  <pre><code>$(document).ready
  (
      function()
      {
          
          var allindexes = $('#Fruits&gt; tbody &gt; tr &gt; td:nthchild(1)').map(function(){
              return $(this).text();
              }).get();
  
          var allnames = $('#Fruits&gt; tbody &gt; tr &gt; td:nthchild(1)').map(function(){
              return $(this).text();
              }).get();
          
              
          for (index = 0; index &lt; a.length; ++index) {
              $('#Preset').append('&lt;option value = \&quot;' + allindexes[index] + 
                                  '\&quot;&gt;&quot;' + allnames[index] + '&lt;/option&gt;');
  }
      }
      
  );
  </code></pre>