Заполнение <select>выпадающим с одним массивом

Question

У меня есть список из более чем 100 цветов в отдельных <td> с. Каждый <td> имеет уникальный идентификатор. Я хотел бы использовать jQuery, чтобы найти идентификаторы каждого тд и поместить его в массив. Затем я хотел бы использовать этот массив и создать нечто похожее на следующее:

<select>
    <option value="array[0]"> array[0]</option>
    <option value="array[1]"> array[1]</option>
    ...
</select>`

Каждый пример, который я рассмотрел до сих пор, требует, чтобы кодер вручную печатал массив. Я надеюсь найти что-то более эффективное.

Answer 1

var cells = $('table tr td');
var sel = $('<select>');

cells.each(function(cell) {
 var opt = document.createElement('option');
 opt.value = cell.id;
 opt.innerHTML = cell.id;
 sel.append(opt);
});

Answer 2

Вы можете сделать что-то вроде этого:

var $select = $('<select>');
$('#tableID td[id]').each(function(idx){
    $select.append('<option value="' + this.id + '"> ' + this.id + '</option>');
});
$select.appendTo('#someElement');

Answer 3

Если вам нужен массив только для заполнения раскрывающегося списка, тогда вы можете обойти создание массива.Попробуйте это:

<table id="colorsTable">
    <tr>
        <td>...</td>
    </tr>
    .
    .
    .
    .
</table>

<select id="colorsList" name="colorsList">
    <option value="array[0]"> array[0]</option>     
    <option value="array[1]"> array[1]</option>
</select>
<script type="text/javascript">
    function populateDropDown()
    {
        var colorsList = $("#colorsList");
        $("#colorsTable td").each
        (
            function()
            {
                colorsList.append($("<option/>").val($(this).text()));
            }
        );
    }
</script>

Answer 4

$("td").get() 

возвращает массив со всеми соответствующими элементами.Затем вы можете просто пройтись, для каждого элемента массива вы строите строку параметров.Примерно так:

var s = "";
var elements = $("td").get();
for (var i=0; i<elements.length; i++) {
    var el = elements[i];
    s+='<option value="'+el.id+'">'+el.id+'</option>'; 
}

Если у вас есть другие tds на странице, сделайте что-то вроде $ ("element # that-is-parent-to-required-tds td");