如何实现购物车添加重量选项并在模态框展示选中值？

一、修正重量选择器的HTML结构 #

先把你原来写的select标签修复好，option标签要闭合，同时把重量文本和对应价格分开存，方便后续获取：

<div class="optwheight">重量选项</div>
<select id="mySelect">
  <option value="">请选择重量</option>
  <option data-price="950" data-weight="226.79g=8oz">226.79g=8oz - $9.50</option>
  <option data-price="820" data-weight="220g">220g - $8.20</option>
  <option data-price="950" data-weight="280g">280g - $9.50</option>
</select>
<!-- 可以删掉原来的myFunction脚本，没用了 -->

说明：用data-price存价格（和你原有代码的分单位统一），data-weight存重量文本，避免value里混符号导致后续处理麻烦。

二、修改加入购物车的点击逻辑 #

原来的代码只取按钮上的固定价格，现在要改成获取选中的重量对应的价格，同时把重量信息存入购物车：

$(".productItem").click(function (e) {
  e.preventDefault();
  // 先判断用户有没有选重量
  const selectedOption = $("#mySelect option:selected");
  if (!selectedOption.val()) {
    alert("请先选择商品重量");
    return;
  }
  // 获取选中的重量文本和对应价格
  const weightText = selectedOption.data("weight");
  const selectedPrice = selectedOption.data("price");

  // 整合商品信息，替换价格为选中的重量价格，新增重量字段
  var iteminfo = $(this.dataset)[0];
  iteminfo.price = selectedPrice;
  iteminfo.weight = weightText;
  iteminfo.qty = 1;

  var itemincart = false;
  // 只有相同ID+相同重量的商品才合并数量
  $.each(shopcart, function (index, value) {
    if (value.id == iteminfo.id && value.weight == iteminfo.weight) {
      value.qty = parseInt(value.qty) + parseInt(iteminfo.qty);
      itemincart = true;
    }
  });
  if (!itemincart) {
    shopcart.push(iteminfo);
  }
  sessionStorage["sca"] = JSON.stringify(shopcart);
  outputCart();
});

三、修改购物车弹窗的渲染逻辑 #

原来的代码没把重量渲染到modal的表格里，现在补上Weight列的内容：

function outputCart() {
  if (sessionStorage["sca"] != null) {
    shopcart = JSON.parse(sessionStorage["sca"].toString());
    $("#checkoutdiv").show();
  }
  var holderHTML = "";
  var total = 0;
  var itemCnt = 0;
  $.each(shopcart, function (index, value) {
    var stotal = value.qty * value.price;
    total += stotal;
    itemCnt += parseInt(value.qty);
    // 新增Weight列的渲染，对应表头
    holderHTML += "<tr><td>" + value.qty + "</td><td>#" + value.id + " " + value.name +
      "(" + value.s + ")</td><td>" + value.weight + "</td><td>" +
      formatMoney(value.price) + "</td><td class='text-xs-right'>" +
      formatMoney(stotal) + "</td><td><span class='remove-item btn btn-danger'>x</span></td></tr>";
  });
  // 注意Total行的colspan要改成4，因为多了一列
  holderHTML +=
    '<tr><td colspan="4" class="text-xs-right">Total</td><td class="text-xs-right">' +
    formatMoney(total) + "</td></tr>";
  $("#output").html(holderHTML);
  $(".total").html(formatMoney(total));
  $(".items").html(itemCnt);
}

四、其他小修复 #

1. 把header里的id="checkoutdiv "（带空格）改成id="checkoutdiv"，不然JS里的显示逻辑会失效；
2. 统一价格符号：原来的select里用了£，改成和原有代码一致的$；
3. 可以删掉页面上的<p id="demo"></p>，如果不需要单独显示选中的价格的话。

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