Django中combo box加载默认值及实现无刷新加入购物车的方法

功能1：页面加载自动同步下拉框默认值对应参数 #

你现有下拉框change事件的更新逻辑已经完整，只需要在DOM加载完成后，手动触发一次所有下拉框的change事件，就能自动加载默认选中项对应的参数。

功能2：无刷新添加购物车+成功提示 #

需要拦截表单的默认提交行为，改用AJAX提交表单数据，请求完成后触发提示弹窗即可。
另外需要注意：你当前HTML循环生成的元素使用了固定ID（ItemID/transactionIDValue/Id_submit），同一个页面ID不能重复，建议删除这些固定ID避免选择器冲突。

完整修改后的JS代码 #

// DOM加载完成后执行
$(function () {
    // 原有下拉框change逻辑不变
    $(document).on("change", '.tranactionID', function (event) {
        event.preventDefault();
        var selector = $(this).closest(".productID")
        selector.find('.id_price').text($(this).children(":selected").attr("price"));
        selector.find('.price-sale').text($(this).children(":selected").attr("sale_price"));
        selector.find('.id_discount').text($(this).children(":selected").attr("discount") + '%');
        let id = $(this).find("option:selected").attr('transID');
        let Url = `{% url 'cart:cart_add' 0 %}`.replace(0, id);
        selector.find("form").attr('action', Url);
    });

    // 页面加载完成后主动触发所有下拉框的change事件，加载默认值参数
    $('.tranactionID').trigger('change');

    // 拦截表单提交，实现无刷新加购物车
    $(document).on('submit', '.productID form', function (e) {
        e.preventDefault();
        const form = $(this);
        // 提交按钮加载状态，防止重复提交
        const submitBtn = form.find('input[type="submit"]');
        const originText = submitBtn.val();
        submitBtn.val('提交中...').prop('disabled', true);

        // AJAX提交表单
        $.ajax({
            url: form.attr('action'),
            type: form.attr('method'),
            data: form.serialize(),
            success: function (res) {
                // 这里可替换为自定义弹窗样式
                alert('商品添加购物车成功！');
            },
            error: function (err) {
                alert('添加失败，请稍后重试');
            },
            complete: function () {
                // 恢复按钮状态
                submitBtn.val(originText).prop('disabled', false);
            }
        })
    })
})

HTML修改建议 #

仅删除循环中重复的固定ID即可，其他逻辑不变：

{% regroup transaction by productID as ProductList %}
  {% for productID in ProductList %}
  <div class="col-sm-3 productID" >
    <div class="product">
      <a href="{% url 'main:product-detail' productID.grouper.id %}" class="img-prod"><img class="img-fluid" src={{productID.grouper.product_image.url}} alt="" height="200px">
        <span class="status id_discount">%</span>
        <div class="overlay"></div>
      </a>
      <div class="text py-3 pb-4 px-3 text-center">
        <h3><a href="#">{{productID.grouper}}</a></h3>
        <div class="d-flex">
          <div class="pricing">
            <p class="price"><span class="mr-2 price-dc id_price">Rs. </span><span class="price-sale">Rs. </span></p>
          </div>
        </div>
          <!-- 删除固定id ItemID -->
          <select class="tranactionID" style="width: 250px;">
            {% for val in productID.list %}
                <option transID={{val.id}} price={{val.Price}} discount={{val.discount_percentage}} sale_price={{val.get_sale}} class="price_value" >{{val.AUID}} - {{val.Description}}</option>
            {% endfor %}
          </select>
            <!-- 删除固定id transactionIDValue -->
            <form class="d-inline" method="post">
              {{cart_product_form}}
              {% csrf_token %}
              <!-- 删除固定id Id_submit -->
              <input type="submit" class="btn btn-primary shadow px-5 py-2" value="Add To Cart">
            </form>
      </div>
    </div>
  </div>
  {% endfor %}

内容的提问来源于stack exchange，提问作者Muhammad Usama Naveed