Django模板表格选择跳转按钮仅首行生效问题求助

核心问题：重复ID导致DOM选择异常 #

HTML规范要求id属性必须全局唯一，但循环生成表格时，每行的下拉框和按钮都使用了相同的id="choices"和id="go-button"。jQuery通过ID选择元素时，只会匹配页面中第一个符合条件的元素，因此只有第一行的按钮能触发事件。

修复步骤 #

1. 替换ID为类名 #

修改模板中的下拉框和按钮，将id改为class，避免全局ID冲突：

<td>
  <select class="choices" style="background-color:DodgerBlue; color: white;">
    <option value="/deliver/{{ doc.id }}/{{doc.number}}/{{doc.date}}/{{doc.note}}/{{doc.document}}/{{doc.status}}">الموارد البشرية</option>
    <option value="">المالية</option>
  </select>
  
  <button type="button" class="go-button button"><span>تحويل</span></button>
</td>

2. 调整JavaScript事件绑定逻辑 #

修改JS代码，点击按钮时，通过DOM层级关系找到当前行对应的下拉框，而不是全局查找：

<script>
    $(document).ready(function() {
      $('.go-button').click(function() {
        // 找到当前按钮所在单元格内的下拉框
        var selectedChoice = $(this).closest('td').find('.choices').val();
        
        // 确保选择了有效链接再跳转
        if (selectedChoice) {
          window.location.href = selectedChoice;
        }
      });
    });
</script>

3. （可选）优化URL生成方式 #

直接拼接URL参数容易出现编码问题，建议使用Django的url模板标签生成安全的URL：

<option value="{% url 'deliver' doc.id doc.number doc.date doc.note doc.document doc.status %}">الموارد البشرية</option>

4. （可选）优化视图代码 #

• 移除不必要的time.sleep(3)，避免阻塞请求
• 不要手动指定id创建对象（可能导致主键冲突），让Django自动生成自增主键
• 使用URL名称而非硬编码路径跳转：

def deliver(request, id, number, date, note, document, status):
    print(document)
    Maward.objects.create(number=number, date=date, note=note, document=document, status=status)
    return redirect("show")

内容的提问来源于stack exchange，提问作者Eng Rasool