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

Question

我正在尝试迭代一组 <select>对象。对于每一个，我都需要添加一系列 <option>标签。这些选项允许用户选择将存储在数据库中的颜色。顺便说一句，我正在使用 bootstrap-select处理 <select> 样式的插件对象，但我认为这与我的帖子无关。

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

只要我能够更新 <select>，我的代码就可以工作对象正确。但是，我的代码似乎也在复制这些 <option>在 <select> 之后标记 标记已关闭，这搞砸了我的 DOM。一张图片胜过一千个字，对吧？

注意每个人如何 <option>标签在 <select> 中重复一次标记(正确)并再次在它之外(不正确)？在 <select> 之外添加的标签标记实际上是在下拉列表下方添加新的色 block 。

在我的 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

修复它