Convert table to select box

by rajaadil

HTML

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

JavaScript

sel = $('<select>');
jQuery('#fav-table a').sort(function(a, b){
    return $(a).text() > $(b).text();
}).each(function () {
  sel.append("<option value=\"" + this.href + "\">" + $(this).text() + "</option>");
});
jQuery('#content').prepend(sel);