Динамические выпадающие списки не заполняются с правильным контентом

Question

Я создаю скрипт, который захватывает некоторый контент из файла JSON и динамически создает некоторый html. Html должен отображать некоторую информацию о продукте как своего рода lookbook.

Внутри html есть несколько выпадающих списков. Эти окна также создаются динамически. Все работает отлично, за исключением того, что содержимое из последнего dropdownbox используется для каждого выпадающего меню, которое создается. См. Прилагаемое изображение:

Я лично считаю, что причина в том, почему это происходит, потому что variants строятся и добавляются до создания фактического 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

<div class="set"> 
    <div class="right"> 
     <div class="products"> 
      <div class="close"></div> 
      <div class="product"> 
       **-- in here the content from the script example below --** 
       <div class="p"> 
        <div class="foto"> 
         <a href="zwart.html"> 
          <img alt="Enkellaars zwart" hover="image.jpg" src="image2.jpg" class="rollover"> 
         </a> 
        </div> 
        <div data-price="39.95" class="prijs">€39.95</div> 
        <div class="varianten"> 
         <div class="product-configure-variants tui"> 
          <select id="product_configure_variants"> 
           <option value="9996912">Maat: M/L</option> 
          </select> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div><!-- .products --> 
    </div><!-- .right --> 
    <div class="image"> 
     <img src="{{ product.image | url_image('220x330x2', product.fulltitle) }}" width="220" height="330" alt="{{ product.fulltitle }}" /> 
    </div> 
</div>   

знает ли тело, что я делаю неправильно ??

Answer 1

В этом цикле $('#sets .set').each() текущий экземпляр .set - this.

Таким образом, вы можете изолировать '.varianten' для каждого .set путем обхода в текущем экземпляре только

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

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

Затем измените строку:

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

К

$variant.html(wqsSelectVariants); 

Обратите внимание, что идентификаторы должен быть уникальным и на странице.