無法使用javascript和jquery創建下拉框

Question

我有以下代碼：

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個內容相同的下拉列表。 我希望這會發生：

1. 首先為循環添加一個開頭的div並選擇
2. 對於規則數組中的每個規則，附加一個選項
3. 添加關閉選擇和關閉div
4. 回到第一

但這是實際發生的情況：

1. 第一個循環添加開始和結束div並選擇。
2. 內容正確的第二個循環添加選項

有人知道為什么嗎？

Answer 1

我認為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);
}

Answer 2

從文檔中：

.append（）方法將指定的內容作為jQuery集合中每個元素的最后一個子元素插入。

您要添加的選項應該是select的子元素，而不是div。

Answer 3

我想這就是你想做的。

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

}