jQuery - <option>被添加在<select>之內和之後它

Question

我試圖遍歷一組<select>對象。對於每一個，我需要添加一系列<option>標籤。這些選項允許用戶選擇將存儲在數據庫中的顏色。另外，我使用bootstrap-select插件來處理<select>對象的樣式，但我認爲這與我的帖子無關。

<option>標籤的數組是從運行時從數據庫加載的一組隱藏字段中學習的。因此，直到那時才知道，所有這些都必須動態發生。每個隱藏的字段都屬於類'color_list'，所以迭代非常簡單。

我的代碼能夠正常工作，因爲我可以正確更新<select>對象。然而，我的代碼似乎也複製這些<option>標籤後<select>標籤關閉，這擰了我的DOM。一張圖片勝過千言萬語，對吧？

注意如何每一個人<option>標籤的<select>標籤（正確）和內重複一次它（不正確）外？在<select>標籤之外添加的標籤實際上在下拉列表中添加了新的顏色塊。

在我的jQuery代碼中，我只附加了一次，所以我不知道爲什麼會發生這種情況。

function updateColorPickers() { 

    // iterate over each color picker 
    $(".colorpicker").each(function(i, picker) { 

     // and add each color as an option to it 
     $(".color_list").each(function(j, elem) { 
      var str = "<option class='color_opt' style='background:"; 
      str  += $(elem).val(); 
      str  += "'>"; 
      str  += $(elem).val(); 
      str  += "</option>"; 

      $(picker).append(str); 
     }); 

     $(picker).selectpicker('refresh'); 
    }); 
} 

Answer 1

這是因爲你有兩個元素與類colorpicker。你是追加到select.colorpicker和div.colorpicker

也就是說，$('.colorpicker').length == 2

可以容易修復它通過使用$('select.colorpicker').each