jQuery

Question

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

无关

<option> 标签数组是从一组在运行时间从数据库加载的隐藏字段中学习的。因此直到那时才知道，所以所有这一切都必须动态发生。这些隐藏字段中的每一个都属于 class '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

因为你有两个元素class colorpicker。您将其附加到 select.colorpicker 和 div.colorpicker

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

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

修复它

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

jQuery - <option> being added both inside <select> and after it

javascript

html

bootstrap-select