add contents of table to a select box with jquery
<p>I have a table which is generated at the bottom of my page.  I want to get the contents of that table (the second column) and put it in a select box at the top of my page.  Ideally in alphabetical order.</p>

<p>I am short on ideas here but this is the code I currently have.</p>

<pre><code>&lt;div id="content"&gt;
    &lt;p&gt;Lots of content goes here...&lt;/p&gt;
    &lt;p&gt;Lots of content goes here...&lt;/p&gt;
    &lt;p&gt;Lots of content goes here...&lt;/p&gt;
    &lt;p&gt;Lots of content goes here...&lt;/p&gt;
    &lt;p&gt;Lots of content goes here...&lt;/p&gt;
    &lt;table id="fav-table"&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;th&gt;Number&lt;/th&gt;
                &lt;th&gt;Name&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;1&lt;/td&gt;
                &lt;td&gt;&lt;a href="http://www.example/com/durham"&gt;Durham&lt;/a&gt;&lt;/td&gt;
            &lt;/tr&gt;    
            &lt;tr&gt;
                &lt;td&gt;2&lt;/td&gt;
                &lt;td&gt;&lt;a href="http://www.example/com/leicester"&gt;Leicester&lt;/a&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;3&lt;/td&gt;
                &lt;td&gt;&lt;a href="http://www.example/com/london"&gt;London&lt;/a&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;4&lt;/td&gt;
                &lt;td&gt;&lt;a href="http://www.example/com/manchester"&gt;Manchester&lt;/a&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;5&lt;/td&gt;&lt;td&gt;&lt;a href="http://www.example/com/worcester"&gt;Worcester&lt;/a&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;6&lt;/td&gt;
                &lt;td&gt;&lt;a href="http://www.example/com/newcastle"&gt;Newcastle&lt;/a&gt;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;
</code></pre>

<p>With the jquery</p>

<pre><code>    jQuery('#content').prepend(jQuery('#fav-table').html());
</code></pre>

<p>If I manually add this jquery then it works.</p>

<pre><code>jQuery('#content').prepend('&lt;select&gt;&lt;option value="http://www.example/com/durham"&gt;Durham&lt;/option&gt;&lt;option value="http://www.example/com/leicester"&gt;Leicester&lt;/option&gt;&lt;option value="http://www.example/com/london"&gt;London&lt;/option&gt;&lt;option value="http://www.example/com/manchester"&gt;Manchester&lt;/option&gt;&lt;option value="http://www.example/com/newcastle"&gt;Newcastle&lt;/option&gt;&lt;option value="http://www.example/com/worcester"&gt;Worcester&lt;/option&gt;&lt;/select&gt;');
</code></pre>

<p>However as the table's data may change I want the jquery to be based on the second column of the table.
How would I go about doing this?</p>

<p>I have put the code in <a href="http://jsfiddle.net/aaronk85/jVKe3/" rel="nofollow">this jsfiddle</a> as well. </p>
