Javascript 使用jquery将表的内容添加到选择框

我有一个在我的页面底部生成的表。我想在第二列获取该表的内容，并将其放入页面顶部的选择框中。最好按字母顺序排列

我在这里缺乏想法，但这是我目前拥有的代码

<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>

如果我手动添加这个jquery，它就会工作

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

但是，由于表的数据可能会更改，我希望jquery基于表的第二列。 我该怎么做呢

---

我也输入了代码

试试这个，可能会有帮助。根据您的需要进行更改：

var values=[], options=[];

//Iterate  td's in second column
$('#fav-table>tbody>tr>td:nth-child(2)').each( function(){
//add item to array
values.push( $(this).text() );         
});

//restrict array to unique items so that select have only unique values in dropdown
var values = $.unique( values );

var values = values.sort();// sort the array

//iterate unique array and build array of select options
$.each( values, function(i, value){
options.push('<option value="' + value + '">' + value + '</option>'); 
})

//finally empty the select and append the items from the array
$('#selectId').empty().append( options.join() );

更新：

 $('body').append('<select id="select">');
     var mylist = $('#select');
    $('#fav-table tr td:nth-child(2) a').each(function(){
    var text = $(this).text();
        mylist.append('<option value=' + $(this).attr('href') + '>'+text+'</option>')
    }
    )


     var listitems = mylist.children('option').get();
     listitems.sort(function(a, b) {
        var compA = $(a).text().toUpperCase();
        var compB = $(b).text().toUpperCase();
        return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
     })
     $.each(listitems, function(idx, itm) { mylist.append(itm); });

订单代码取自其他问题

在添加到div之前，您必须创建一个select对象addoptions，方法是创建select的html字符串并添加它。您可以使用jquerysort对锚文本进行排序，然后对每个锚文本进行迭代以创建选项

---

是什么让您认为可以将表附加到select元素？他的意思是将其转换为select，这很好clear@codeiz你认为问题中的转换词在哪里？在这一行中，jQuery'content'.prependjQuery'fav-table'.html；？我想在第二列获取该表的内容，并将其放入页面顶部的选择框中。最好按字母顺序排列。这对你来说还不够清楚吗？还有两个答案，所以不要怪我，是你没有得到答案it@codeiz我感谢你努力回答这个问题我知道他想要什么，重点是别的。似乎你工作得很好感谢其他人查看答案现场演示链接似乎链接回我原来的小提琴？我也添加了排序，看一看。谢谢排序似乎不是100%的字母顺序，但它给了我一些工作！您可能需要在排序中指定，现在我使用文本。这非常感谢。除了每个选项的值似乎不一致？字母顺序也很好，但有一件事我不能从你所做的事情中弄清楚，那就是为什么默认情况下总是选择达勒姆？例如，如果您将manchester更改为amanchester，它将显示在选择框的顶部，但durham似乎仍处于选中状态？不，这不对，我已尝试添加其他行，而选中的选项是第一个选项，即解除；我已经更新了我的答案，将锚定标记的href属性值包括在内。谢谢，这正是我现在所希望的。感谢您的帮助。关于这个问题，我提到了选择框中表格的第一行是默认行。我已经在firefox上讨论过了，这个问题似乎只存在于这里。你得到同样的东西吗？例如，在装载时选择了nfirefox durham？不。。。！它工作得很好。。如果您是从php获取表的，那么只需按字母顺序排列结果

 $('body').append('<select id="select">');
     var mylist = $('#select');
    $('#fav-table tr td:nth-child(2) a').each(function(){
    var text = $(this).text();
        mylist.append('<option value=' + $(this).attr('href') + '>'+text+'</option>')
    }
    )


     var listitems = mylist.children('option').get();
     listitems.sort(function(a, b) {
        var compA = $(a).text().toUpperCase();
        var compB = $(b).text().toUpperCase();
        return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
     })
     $.each(listitems, function(idx, itm) { mylist.append(itm); });

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);