HTML Select onChange事件求和问题：切换选项后结果不更新

你的代码存在两个核心问题导致切换选项时结果不更新：

• 没有给select元素绑定change事件，切换选项时不会重新执行求和逻辑
• 直接对字符串类型的value做+运算会执行字符串拼接，而非数值求和

修正后的完整代码 #

HTML部分

<select id="price" class="form-control" name="two">
  <option value="100">Monthly</option>
  <option value="200">3 month</option>
  <option value="300">6 month</option>
  <option value="400">6 month</option>
</select>

<div id="display"></div>

JS部分

// 获取元素
const priceSelect = document.getElementById("price");
const displayEl = document.getElementById('display');

// 定义求和函数
function calculateSum() {
  // 把select的value转成数字，和固定值1000（也转成数字）求和
  const selectedValue = Number(priceSelect.value);
  const sum = selectedValue + 1000;
  // 更新显示内容
  displayEl.textContent = sum;
}

// 初始化时先执行一次，显示默认选中项的求和结果
calculateSum();

// 给select绑定change事件，切换选项时重新计算
priceSelect.addEventListener('change', calculateSum);

关键改动说明 #

• 新增change事件监听器：当select选项切换时，自动调用求和函数
• 使用Number()把字符串类型的value转为数值类型，确保执行的是加法运算而非字符串拼接
• 提取求和逻辑为独立函数，初始化时也执行一次，避免页面加载后显示为空

内容的提问来源于stack exchange，提问作者Seyyed Mohammad Hosseini