Javascript 动态下拉列表无法填充正确的内容

我正在构建一个脚本，它从JSON文件中获取一些内容，并动态构建一些html。 Html将一些产品信息显示为某种外观

在html中有几个下拉框。这些框也是动态创建的。除了最后一个下拉框中的内容用于构建的每个下拉列表外，其他一切都正常工作。见附图：

我个人认为，之所以会发生这种情况，是因为变量是在实际的HTML生成之前生成和附加的

$('#sets .set').each( function(){
    ....
    $.getJSON(url, function (data){
        var product = data.product;
        var $container = $('.products .product');
        var productsHtml = [];

        $.each(product.related, function(index, rel){
            $.getJSON(url, function (data){
                var rel = data.product;
                var wqsSelectVariants = $('<div class="product-configure-variants tui" />');
                var select = $('<select id="product_configure_variants"/>');

                $.each(rel.variants, function (index, variant){
                    select.append('<option value=' + variant.id + '>' + variant.title + '</option>');
                    wqsSelectVariants.append(select);
                });

                $('.varianten').html(wqsSelectVariants);
            });

            var productHtml = '' + '<div class="p"><div class="foto"><a href="'+fullurl+''+rel.url+'"><img class="rollover" src="'+image+'" hover="'+image2+'" alt="'+rel.fulltitle+'"/></a></div><div class="prijs" data-price="'+rel.price.price_incl+'">€'+rel.price.price_incl+'</div><div class="varianten"></div></div>';
            productsHtml.push(productHtml);
        });

        productsHtml = productsHtml.join('');
        $container.html(productsHtml);
    });
});

HTML

有人知道我做错了什么吗

在$'sets.set'循环中。每个.set的当前实例都是这样的

因此，您可以通过仅在当前实例内遍历来隔离每个.set的“.varianten”

 $('#sets .set').each( function(){
      var $variant =$(this).find('.varianten');

      /* do all the ajax stuff */
});

然后更改行：

$('.varianten').html(wqsSelectVariants);

到

---

请注意，ID在页面中也必须是唯一的。

我猜，您正在将它添加到同一个容器$'.varianten'.htmlwqselectvariants；您可能需要在$'sets.set.内创建诸如.varient-1、.varient-2…之类的容器。每个容器都需要隔离$'.varianten'的实例，因为它与.set的当前实例相关。这通常是一个非常简单的遍历，但是如果没有显示任何html，这将非常有用，并且通常比@Manivannan@Manivannan例如我试过了，但运气不好。我添加了一个唯一标识符，但这并没有起作用@我已经用HTML更新了我的答案。你对Variaten的孤立实例是什么意思？？你有一个例子吗？

$('.varianten').html(wqsSelectVariants);

$variant.html(wqsSelectVariants);