无法使用 javascript 和 jquery 创建下拉框答案

【问题标题】：Can't create dropdown box with javascript and jquery无法使用 javascript 和 jquery 创建下拉框
【发布时间】：2011-10-08 13:31:59
【问题描述】：

我有以下代码：

for (i = 0; i < 13; i++){
    $('.players').append('<div class="rule_dropdown"><select name="rule' + i + '">');
    for(j = 0; j < rules.length; j++){
        $('.players').append('<option>' + rules[j] + '</option>');
    }
    $('.players').append('</select></div>');

}

我想要 13 个具有相同内容的下拉列表。我希望这会发生：

首先 for 循环添加一个开头 div 并选择
对于规则数组中的每个规则，附加一个选项
添加关闭选择和关闭 div
返回#1

但这就是实际发生的情况：

第一个循环添加打开和关闭 div 并选择。
具有正确内容的第二个循环添加选项

有人知道为什么吗？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

我认为这就是你想要做的..

var rules=[1,2,3,4,5,6];
    for (i = 0; i < 13; i++){
    $('.players').append('<div class="rule_dropdown"><select id="rule'+ i +'" name="rule' + i + '">');
    for(j = 0; j < rules.length; j++){
        $('#rule'+i).append('<option>' + rules[j] + '</option>');
    }
    $('.players').append('</select></div>');

}

【讨论】：

【解决方案2】：

我认为append 向 DOM 中添加了一个完整的元素，而不仅仅是将文本添加到 HTML 中。尝试单独构建您的元素并像这样添加它们：

for (i = 0; i < 13; i++){
  var $select = $('<select name="rule' + i + '"></select>');
  for(j = 0; j < rules.length; j++) {
    $select.append('<option>' + rules[j] + '</option>');
  }
  var $div = '<div class="rule_dropdown"></div>';
  $div.append($select);
  $('.players').append($div);
}

【讨论】：

【解决方案3】：

来自文档：

.append() 方法插入指定的内容作为 jQuery 集合中每个元素的最后一个子元素。

您要添加的选项应该是 select 的子元素，而不是 div。

【讨论】：