如何传递从 django 表单操作 url 的下拉列表中选择的项目的 ID？

Question

问题 在此我想将交易项目的 id 从下拉列表中传递到表单操作 URL cart_add。 从下拉列表中选择的值中，我获取了 id，但现在我不知道如何将该 id 传递给脚本，然后以添加到购物车的形式传递。如果有人知道请帮忙。

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
   $(document).on("change", '.Price', function (event) {
           event.preventDefault();
           $('#id_price').text($(this).children(":selected").attr("price"));
           $('#id_sale_price').text($(this).children(":selected").attr("sale_price"));
           $('#transactionIDValue').val($(this).children(":selected").attr("transID"));
    });
</script>



    <select class="Price" style="width: 250px;">
      <option value="none" selected disabled hidden>
        Select an Option
    </option>
    {% for item in transaction %}
    
      <option transID={{item.id}} price={{item.Price}} sale_price={{item.get_sale}} >{{item.AUID.unit}} - {{item.Description}}</option>

    {% endfor %}
  </select>

    <form id='transactionIDValue' action="{% url 'cart:cart_add' %}" class="d-inline" method="post">
      {{cart_product_form}}
      {% csrf_token %}
      <input type="submit" class="btn btn-primary shadow px-5 py-2" value="Add To Cart">
      <!-- <button type="submit" class="btn btn-primary shadow px-5 py-2">Add to Cart</button> -->
    </form>
 

Answer 1

只需在你的脚本标签中添加操作 URL，就像这样检查工作 sn-p

$(document).on("change", '.Price', function (event) {
           event.preventDefault();
           let id = $('#customselect').find(":selected").attr('price');
           console.log('Id : ',id)
         let Url = `/page/${id}`  
         $('#transactionIDValue').attr('action', Url);
         let formAction = $('#transactionIDValue').attr('action')
         let formAction2 = $('#transactionIDValue').prop('action')
         console.log('form action relative  url : ',formAction)
         console.log('form action full url : ',formAction2)
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="Price" id="customselect">
<option value="">----</option>
<option value="1" price="1">1</option>
<option value="2" price="2">2</option>
<option value="3" price="3">3</option>
</select>

<form id="transactionIDValue">
</form>