如何计算下拉选框中所有选中选项的data-price属性值总和？

你的问题出在代码仅通过selectedIndex获取了单个选中选项，而多选场景下需要遍历所有被选中的选项来计算总和。以下是两种可行的实现方式：

方法一：遍历选中选项集合 #

let elm = document.getElementById('treatmentCSelect');

elm.addEventListener('change', function () {
  let totalPrice = 0;
  // 遍历所有选中的选项（this.selectedOptions直接返回选中项集合）
  for (const option of this.selectedOptions) {
    // 解析data-price为整数，无效值按0处理避免NaN干扰
    const price = parseInt(option.dataset.price, 10) || 0;
    totalPrice += price;
  }
  console.log('选中项总价格:', totalPrice);
});

方法二：使用数组reduce简化求和 #

let elm = document.getElementById('treatmentCSelect');

elm.addEventListener('change', function () {
  // 将选中项集合转为数组，用reduce累加求和
  const totalPrice = Array.from(this.selectedOptions).reduce((sum, option) => {
    const price = parseInt(option.dataset.price, 10) || 0;
    return sum + price;
  }, 0);
  console.log('选中项总价格:', totalPrice);
});

关键说明 #

1. selectedOptions属性：HTMLSelectElement自带的selectedOptions会返回当前所有被选中的<option>元素集合，是多选场景下获取选中项的最优方式。
2. dataset.price：通过option.dataset.price可以直接获取data-price属性值，比getAttribute('data-price')更简洁规范。
3. 数值容错处理：parseInt(...,10) || 0确保当data-price不是有效数字时，不会让总和变成NaN。

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