如何通过jQuery获取Django模板循环渲染select的选中项价格值

你模板里已经把每个选项的价格存在了option标签的data-item-value自定义属性上，直接通过jQuery读取这个属性值即可。注意你现有模板里所有select都复用了同一个id="bedrooms"，不符合HTML id全局唯一的规范，建议把id改成和name一致的动态值id="package_{{ package.id }}"，避免元素选择异常。

1. 下拉框切换时实时获取当前选中项价格 #

直接给所有下拉框绑定change事件，切换选项时自动读取对应价格：

// 监听所有样式类为input-dsn的下拉框选择变化
$('.input-dsn').on('change', function () {
  // 读取当前选中option的价格，转成数字类型避免后续计算出现字符串拼接问题
  const selectedPrice = Number($(this).find('option:selected').data('item-value'));
  
  // 以下替换为你自己的业务逻辑，比如实时计算总价、赋值给隐藏域等
  console.log('当前选中项价格：', selectedPrice);
});

绑定这个事件后，你原来写在select标签上的内联onChange属性可以直接删掉，内联事件耦合度高不好维护，统一用jQuery绑定更方便。

2. 一次性获取所有下拉框选中项的价格 #

如果需要在表单提交、按钮点击等场景一次性拿到所有下拉框的选中价格，可以用遍历的方式实现：

function calcSelectedTotal() {
  let total = 0;
  const priceArr = [];
  // 遍历页面上所有套餐下拉框
  $('.input-dsn').each(function () {
    const itemPrice = Number($(this).find('option:selected').data('item-value'));
    priceArr.push(itemPrice);
    total += itemPrice;
  });

  return {
    priceList: priceArr, // 按顺序返回每个下拉框选中项的价格数组
    totalPrice: total // 返回所有选中项的价格总和
  };
}

// 调用示例
const res = calcSelectedTotal();
console.log('各选项价格：', res.priceList);
console.log('总价：', res.totalPrice);

注意事项 #

• 你原有模板内联事件里写的document.getElementByName是语法错误，原生DOM对应方法是document.getElementsByName，返回的是元素数组，直接取.value会报错，用上面的jQuery写法可以完全规避这个问题。
• jQuery的.data()方法读取data-*属性时自动做了类型转换，如果你存的价格是数字格式，大部分场景可以不用手动转Number，但保险起见手动转一次可以避免浮点数、字符串拼接的异常。

内容的提问来源于stack exchange，提问作者Obaid ur Rehman