Question

我在单独的<td>中有100多种颜色的列表。每个<td>都有一个唯一的ID。我想使用jQuery来查找每个td的ID并将其放入数组中。然后我想使用该数组并创建类似于以下内容的东西：

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

到目前为止我看过的每个例子都要求编码人员手动输入数组。我希望能找到更高效的东西。

Answer 1

$("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-needed-tds td”）;

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

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

使用一个数组</select>填充<select>下拉列表

4 个答案: