Javascript jQuery-<；选项>；在内部和内部都添加<；选择>；之后呢

我试图迭代一组

对象。对于每一个，我都需要添加一系列的

标记。这些选项允许用户选择将存储在数据库中的颜色。另外，我使用

引导选择
插件来处理
对象的样式，但我认为这与我的文章无关

从运行时从数据库加载的一组隐藏字段中学习
标记数组。因此直到那时才知道，所以所有这些都必须动态发生。每个隐藏字段都属于“color_list”类，因此迭代非常容易

只要我能够正确更新
对象，我的代码就可以正常工作。但是，在关闭
标记后，我的代码似乎也在复制这些
标记，这会破坏我的DOM。一幅画抵得上千言万语，对吗


请注意，每个单独的
标记是如何在
标记内重复一次（正确），然后在标记外重复一次（不正确）？在
标记之外添加的标记实际上是在下拉列表下方添加新的颜色块

在我的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');
    });
}

函数updateColorPickers（）{
//迭代每个颜色选择器
$（“.colorpicker”）。每个（函数（i，picker）{
//并添加每种颜色作为选项
$（“.color_list”）。每个（函数（j，元素）{
var str=“”；
str+=$（elem.val（）；
str+=”；
$（选择器）.append（str）；
});
$（选择器）。选择选择器（'刷新'）；
});
}
这是因为类
colorpicker有两个元素。您正在将其附加到
select.colorpicker
和
div.colorpicker

也就是说，
$（'.colorpicker'）。长度==2

您可能可以使用
$（'select.colorpicker'）来修复它。每个
都是因为类
colorpicker
有两个元素。您正在将其附加到
select.colorpicker
和
div.colorpicker

也就是说，
$（'.colorpicker'）。长度==2

您可能可以使用
$（'select.colorpicker'）来修复它。每个
我都没有注意到。额外的类正在通过
引导选择添加。我需要想办法解决这个问题。谢谢大家!@Randall
$（“select.colorpicker”）
应允许您将选择限制为使用colorpicker类的页面上的任何选择。如果可以的话，我会在这个select上加上一个唯一的ID，并将它用作我的选择器。
$（'select.colorpicker
）。每一个都解决了这个问题。再次感谢@MattSizzle-页面上将有许多这样的
颜色选择器，因此唯一的id可能不起作用。然而，按类迭代应该是一种简单的方法。谢谢我没注意到。额外的类正在通过
引导选择添加。我需要想办法解决这个问题。谢谢大家!@Randall
$（“select.colorpicker”）
应允许您将选择限制为使用colorpicker类的页面上的任何选择。如果可以的话，我会在这个select上加上一个唯一的ID，并将它用作我的选择器。
$（'select.colorpicker
）。每一个都解决了这个问题。再次感谢@MattSizzle-页面上将有许多这样的
颜色选择器，因此唯一的id可能不起作用。然而，按类迭代应该是一种简单的方法。谢谢