如何在Django中将下拉菜单选中条目的id传递到form表单的action目标URL

问题分析 #

你的代码存在两处核心错误导致ID无法传递：

1. 你将transactionIDValue设为了<form>标签的ID，而val()方法仅能作用于表单输入类元素，直接给form标签赋值不会生效
2. 没有预留接收交易ID的传参通道，表单提交时无法将选中的ID发送给后端

解决方案1：通过隐藏输入框传递参数（推荐） #

这种方案适配POST传参的常规场景，修改成本最低：

1. 调整表单结构，添加隐藏输入框用于存储选中的交易ID，同时修改原有form的ID避免冲突
2. 原有JS逻辑无需修改，赋值会自动作用到隐藏输入框，提交表单时参数会自动随POST请求发送到后端

修改后的代码如下：

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
   $(document).on("change", '.Price', function (event) {
           event.preventDefault();
           const selectedOption = $(this).children(":selected");
           $('#id_price').text(selectedOption.attr("price"));
           $('#id_sale_price').text(selectedOption.attr("sale_price"));
           // 赋值给隐藏输入框
           $('#transactionIDValue').val(selectedOption.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='cartAddForm' action="{% url 'cart:cart_add' %}" class="d-inline" method="post">
  {{cart_product_form}}
  {% csrf_token %}
  <!-- 新增隐藏输入框，name属性和后端接收参数名保持一致即可 -->
  <input type="hidden" id="transactionIDValue" name="transaction_id" value="">
  <input type="submit" class="btn btn-primary shadow px-5 py-2" value="Add To Cart">
</form>

后端直接通过request.POST.get('transaction_id')即可拿到选中的交易ID。

解决方案2：动态修改表单action路径传递ID #

如果你的cart_add路由要求ID放在URL路径/查询参数中，可以用这个方案：
修改JS逻辑，每次选中下拉选项时动态拼接表单的action地址：

$(document).on("change", '.Price', function (event) {
  event.preventDefault();
  const selectedOption = $(this).children(":selected");
  $('#id_price').text(selectedOption.attr("price"));
  $('#id_sale_price').text(selectedOption.attr("sale_price"));
  const transId = selectedOption.attr("transID");
  // 拼接查询参数的写法，后端用request.GET.get('transaction_id')取值
  const newAction = "{% url 'cart:cart_add' %}?transaction_id=" + transId;
  // 如果路由是路径参数格式比如/cart/add/<id>/，写法如下：
  // const newAction = `/cart/add/${transId}/`;
  $('#cartAddForm').attr('action', newAction);
});

优化建议 #

建议你把自定义的transID、price等属性改成符合HTML规范的data-*格式，避免兼容性问题，示例如下：

<!-- 选项定义 -->
<option data-trans-id="{{item.id}}" data-price="{{item.Price}}" data-sale-price="{{item.get_sale}}" >{{item.AUID.unit}} - {{item.Description}}</option>
<!-- JS取值 -->
const transId = selectedOption.data('transId');
const price = selectedOption.data('price');

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