jQuery - <option>被添加到<select>内部及之后

Question

我试图迭代一组＆lt; select＆gt;对象。对于每一个，我需要添加一系列＆lt;选项＆gt;标签。这些选项允许用户选择将存储在数据库中的颜色。另外，我使用bootstrap-select插件来处理＆lt; select＆gt;的样式。对象，但我不认为这与我的帖子有关。 ＆lt;选项＆gt;的数组标记是从运行时从数据库加载的一组隐藏字段中学习的。因此，直到那时才知道，所以这一切都必须动态发生。这些隐藏字段中的每一个都属于类＆＃39; color_list＆＃39;，因此迭代非常容易。 我的代码可以正常工作，因为我能够更新＆lt; select＆gt;对象正确。但是，我的代码似乎也在重复这些＆lt; option＆gt; ＆lt; select＆gt;之后的标签标签已关闭，这搞砸了我的DOM。一张图片胜过千言万语吧？   注意每个人＆lt;选项＆gt;标签在＆lt; select＆gt;内重复一次标签（正确）并再次在它之外（不正确）？在＆lt; select＆gt;之外添加的标记tag实际上是在下拉列表下添加新的颜色块。 在我的jQuery代码中，我只是一次附加它，所以我不知道为什么会发生这种情况。 function updateColorPickers（）{     //遍历每个颜色选择器     $（＆＃34; .colorpicker＆＃34;）.each（function（i，picker）{         //并将每种颜色添加为选项         $（＆＃34; .color_list＆＃34;）。each（function（j，elem）{             var str =＆＃34;＆lt; option class =＆＃39; color_opt＆＃39;风格=＆＃39;背景：＆＃34 ;;             str + = $（elem）.val（）;             str + =＆＃34;＆＃39;＆gt;＆＃34 ;;             str + = $（elem）.val（）;             str + =＆＃34;＆lt; / option＆gt;＆＃34 ;;             $（选择器）.append（STR）;         }）;         $（选择器）.selectpicker（＆＃39;刷新＆＃39;）;     }）; }

Answer 1

这是因为你有两个类colorpicker的元素。您要将其附加到select.colorpicker和div.colorpicker

即$('.colorpicker').length == 2

您可以使用$('select.colorpicker').each

修复此问题