无法弄清楚如何处理django电子商务网站中的产品大小，因为不同产品的选择框具有相同的id

Question

这是我的html：

{% if product.id in list_cart %}
<div class="btn-group" style="display: none;">
<select class="selection-2 border" data-product={{product.id}} style="border: cadetblue;"
 name="size" required id="sizebox">
 {% for t in product.size.all %}
<option value="{{t}}" id="{{t}}">{{t}}</option>
 {% endfor %}
  </select>
  </div>
    {% else %}
 <div class="btn-group">
 <select class="selection-2 border" data-product={{product.id}} style="border: cadetblue;"
    name="size" required id="sizebox">
 {% for t in product.size.all %}
 <option value="{{t}}" id="{{t}}">{{t}}</option>
  {% endfor %}
</select>
  </div>
{% endif %}

这是我的javascript：

var updateBtns = document.getElementsByClassName('update-cart')

for (i=0;i<updateBtns.length;i++){
updateBtns[i].addEventListener('click',function(){
    var productId=this.dataset.product
    var action=this.dataset.action


    var sizebox = document.getElementById("sizebox");
    var size = sizebox.options[sizebox.selectedIndex].value;
    console.log(size)


    updateUserOrder(productId, action, size)
   
})
}

我正在做一个基本的django ecom。网站。我遇到了一个我不能解决的问题。问题是，在我的网站的产品页面上，每个产品都有一个项目大小的选择框，每个选择框都有相同的id (因为我正在迭代产品)。因此，每当我为除第一个产品之外的任何产品选择一个尺寸时，从第一个产品下的第一个选择框中选择的尺寸将进入我的数据库，而不是在该产品下选择的尺寸。我想找出一种方法，以便将产品下选择框中的大小发送到数据库，而不是当前正在发生的带有id selectbox的第一个选择框中的大小。请帮帮忙。谢谢。

Answer 1

尝试使用循环计数器并为选择字段生成不同的id，使用loop.index生成值或使用自定义计数器，如

counter = 0
{%for ...%}
<option value="{{t}}" id="{{t+counter}}">{{t}}</option>
counter++
{%endfor%}

或者使用loop.index，下面是您的代码

{% if product.id in list_cart %}
<div class="btn-group" style="display: none;">
<select class="selection-2 border" data-product={{product.id}} style="border: cadetblue;"
 name="size" required id="sizebox">
 {% for t in product.size.all %}
<option value="{{t}}" id="{{t+loop.index}}">{{t}}</option>
 {% endfor %}
  </select>
  </div>
    {% else %}
 <div class="btn-group">
 <select class="selection-2 border" data-product={{product.id}} style="border: cadetblue;"
    name="size" required id="sizebox">
 {% for t in product.size.all %}
 <option value="{{t}}" id="{{t+loop.index}}">{{t}}</option>
  {% endfor %}
</select>
  </div>
{% endif %}