实现带Select框的商品详情页：选中项总价计算及列表展示问题

核心思路 #

放弃用if分支判断选项来累加价格的方式，改用自定义数据属性存储每个选项的价格，直接读取计算，同时维护选中列表的价格数据，每次添加后重新计算总价，避免逻辑冗余和错误。

调整后的HTML结构 #

给每个option添加data-price属性存储对应价格，方便JS直接读取：

<div class="product-select-area">
  <select id="productSelect">
    <option value="">请选择主商品</option>
    <option value="经典款T恤" data-price="129">经典款T恤 - 129元</option>
    <option value="宽松卫衣" data-price="199">宽松卫衣 - 199元</option>
  </select>
  <select id="accessorySelect">
    <option value="">请选择配件</option>
    <option value="纯棉袜子" data-price="29">纯棉袜子 - 29元</option>
    <option value="定制帽子" data-price="59">定制帽子 - 59元</option>
  </select>
  <button id="addToCartBtn">加入选中列表</button>
</div>

<!-- 选中商品列表 -->
<ul id="selectedItemsList"></ul>

<!-- 总价显示 -->
<div class="total-price-wrap">
  当前总价：<span id="totalAmount">0</span> 元
</div>

实现逻辑的JS代码 #

// 获取页面元素
const productSel = document.getElementById('productSelect');
const accessorySel = document.getElementById('accessorySelect');
const addBtn = document.getElementById('addToCartBtn');
const selectedList = document.getElementById('selectedItemsList');
const totalEl = document.getElementById('totalAmount');

// 绑定添加按钮点击事件
addBtn.addEventListener('click', handleAddItem);

function handleAddItem() {
  // 获取两个select的选中项
  const selectedProduct = productSel.options[productSel.selectedIndex];
  const selectedAccessory = accessorySel.options[accessorySel.selectedIndex];

  // 校验是否都完成选择
  if (!selectedProduct.value || !selectedAccessory.value) {
    alert('请选择主商品和配件');
    return;
  }

  // 读取选项的价格
  const productPrice = parseInt(selectedProduct.dataset.price);
  const accessoryPrice = parseInt(selectedAccessory.dataset.price);
  const itemTotal = productPrice + accessoryPrice;

  // 创建选中项的li元素
  const listItem = document.createElement('li');
  listItem.textContent = `${selectedProduct.value} + ${selectedAccessory.value} — ${itemTotal}元`;
  // 给li存储该组合的总价，用于后续计算总金额
  listItem.dataset.itemTotal = itemTotal;

  // 添加到列表
  selectedList.appendChild(listItem);

  // 更新总价格
  updateTotalPrice();
}

// 计算并更新总价
function updateTotalPrice() {
  let total = 0;
  // 遍历所有选中的商品项，累加价格
  const allItems = selectedList.querySelectorAll('li');
  allItems.forEach(item => {
    total += parseInt(item.dataset.itemTotal);
  });
  totalEl.textContent = total;
}

关键优势 #

1. 避免冗余if判断：新增商品选项时，只需在option上添加data-price，无需修改JS逻辑，扩展性强
2. 总价计算更可靠：每次重新遍历选中列表计算总价，不会因为重复点击、删除项等操作导致总价错误
3. 数据与视图分离：价格数据存在HTML的自定义属性中，逻辑层直接读取，维护更方便

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