Question

尝试通过循环获取选择框。只显示一个项目。

<table>
    <tbody id="addto_tb"></tbody>
</table>

var nodesList = ['node1','node2','node3'];
var select =  $('<select/>');

$('<option />', {value: 'node1', text: 'node1'}).appendTo(select);  
$('<option />', {value: 'node2', text: 'node2'}).appendTo(select);

$(nodesList).each(function(iter,elem){
    alert(elem);
    var trEle = $(document.createElement("tr"));
    trEle.addClass(" "+iter);

    var tdEle = $(document.createElement("td"));
    $(tdEle).append(select);

    trEle.append(tdEle);                            
    $('#addto_tb').append(trEle);
    $($($('#addto_tb').find("."+iter)).find('select')).val(elem);
});

在这种情况下，应该有3个选择框。但只有一个显示。当我发出警报时，我可以看到所有三个选择框都会出现但只显示一个。当我检查时，我可以看到前两个<td>是空的。

Fiddle

Answer 1

当你创建select时，只有一个实例，所以每个循环，你实际上最终只是将它移动到下一个tr

添加.clone（）方法以附加项目。

$(tdEle).append(select.clone());

Answer 2

你的循环只是将select元素从一个td移动到下一个td。您每次都（通过变量）引用相同的选择，因此当您运行$(tdEle).append(select);时，您从当前位置获取select（变量引用的元素）并将其附加到新位置。您需要为循环的每次迭代声明一个新的，单独的选择项：

var nodesList = ['node1','node2','node3'];

$(nodesList).each(function(iter,elem){
  alert(elem);
  var select =  $('<select/>');
  $('<option />', {value: 'node1', text: 'node1'}).appendTo(select);  
  $('<option />', {value: 'node2', text: 'node2'}).appendTo(select);
  var trEle = $(document.createElement("tr"));
  trEle.addClass(" "+iter);

  var tdEle = $(document.createElement("td"));
  $(tdEle).append(select);

  trEle.append(tdEle);                            
  $('#addto_tb').append(trEle);
  $($($('#addto_tb').find("."+iter)).find('select')).val(elem);
});

选择迭代时不显示的框

2 个答案: