如何检测select标签的选项变更，实现点餐页切换商品时重置购买数量？

解决方法 #

你只需要给select元素绑定change事件即可监听选项变更，修改后的JS代码如下：

const amountEl = document.getElementById('amount');
const addEl = document.getElementById('add');
const deleteEl = document.getElementById('delete');
const totalPriceEl = document.getElementById('total-price');
const selectEl = document.getElementById('select'); // 提前获取下拉元素

function totalPriceCount(value) {
  const selectValue = parseInt(selectEl.options[selectEl.selectedIndex].value); // 修正原代码的变量名错误
  let totalPrice = 0;

  switch (selectValue) {
    case 1:
      totalPrice = 3.99 * value;
      break;
    case 2:
      totalPrice = 4.99 * value;
      break;
    case 3:
      totalPrice = 1.99 * value;
      break;
    case 4:
      totalPrice = 1.29 * value;
      break;
    default:
      totalPrice = 1.49 * value;
      break;
  }

  totalPriceEl.innerText = totalPrice.toFixed(2); // 保留两位小数，符合价格显示规范
}

function increaseAmount() {
  let value = parseInt(amountEl.innerText);
  value += 1;
  amountEl.innerText = value;
  totalPriceCount(value);
}

function decreaseAmount() {
  let value = parseInt(amountEl.innerText);
  value -= 1;
  if (value < 1) {
    alert('Food item can not be 0');
  } else {
    amountEl.innerText = value;
  }
  totalPriceCount(value);
}

// 下拉选项变更的处理逻辑
function handleSelectChange() {
  amountEl.innerText = 1; // 重置购买数量为1
  totalPriceCount(1); // 更新总价为当前选中商品的单价
}

addEl.addEventListener('click', increaseAmount);
deleteEl.addEventListener('click', decreaseAmount);
selectEl.addEventListener('change', handleSelectChange); // 绑定change事件监听选项切换

实现说明 #

• <select>元素的change事件会在用户选中不同选项时自动触发，完全匹配你的监听需求
• 修正了原有代码里的变量引用错误：原代码中select.selectedIndex的select未定义，改为已提前声明的selectEl
• 新增的toFixed(2)处理可以避免计算总价时出现多位小数的异常显示问题

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