如何在选中下拉选项时修改JavaScript变量的值？

问题描述 #

需要在JavaScript中实现：当下拉选框（select）的不同选项被选中时，对应修改一个变量的值。例如选中选项1时变量值设为10，选中选项2时设为20，以此类推。

现有代码 #

var exerciseValue = {
  price: 5
}
var noExercise = document.getElementById('noExercise');
noExercise.addEventListener('click', function(){
  exerciseValue.price = -150;
})
var lightExercise = document.getElementById('lightExercise');
lightExercise.addEventListener('click', function(){
  exerciseValue.price = -50;
})
// 注：原代码末尾存在多余闭合大括号，属于语法错误

<select type="number" id="exerciseInput">
  <option value="noExercise" id="noExercise">Sedentary(little or no exercise)</option>
  <option value="lightExercise" id="lightExercise">Light(1-3 times/week)</option>
  <option value="moderateExercise" id="moderateExercise">Moderate(4-5 times/week)</option>
  <option value="activeExercise" id="activeExercise">Active(daily exercise/intense exercise 3-4 times/week)</option>
  <option value="veryActiveExercise" id="veryActiveExercise">Very Active(intense exercise daily)</option>
  <option value="extraActiveExercise" id="extraActiveExercise">Extra Active(very intense daily or physical activity)</option>
</select>

优化解决方案 #

无需给每个<option>单独绑定点击事件，直接给<select>元素绑定change事件更简洁高效。可以先建立选项与对应值的映射表，触发事件时直接根据选中项更新变量：

完整代码 #

<select id="exerciseInput">
  <option value="noExercise">久坐（几乎不运动）</option>
  <option value="lightExercise">轻度运动（每周1-3次）</option>
  <option value="moderateExercise">中度运动（每周4-5次）</option>
  <option value="activeExercise">积极运动（每日运动/每周3-4次高强度运动）</option>
  <option value="veryActiveExercise">高度活跃（每日高强度运动）</option>
  <option value="extraActiveExercise">极度活跃（每日极高强度运动或体力劳动）</option>
</select>

<script>
// 初始化目标变量
var exerciseValue = {
  price: 5
};

// 定义选项与对应值的映射关系
var exercisePriceMap = {
  noExercise: -150,
  lightExercise: -50,
  moderateExercise: 0, // 可根据需求自定义对应值
  activeExercise: 50,
  veryActiveExercise: 100,
  extraActiveExercise: 150
};

// 获取下拉选框元素
var exerciseSelect = document.getElementById('exerciseInput');

// 绑定change事件，选中项变化时触发
exerciseSelect.addEventListener('change', function() {
  // 获取当前选中的选项值
  var selectedKey = this.value;
  // 根据映射表更新变量
  exerciseValue.price = exercisePriceMap[selectedKey];
  // 可选：打印结果验证修改是否生效
  console.log('当前exerciseValue.price:', exerciseValue.price);
});
</script>

核心说明 #

1. 映射表设计：用对象exercisePriceMap统一存储选项与对应值的关系，后续新增或修改选项值只需调整该对象，维护成本更低。
2. 事件绑定优化：监听<select>的change事件，选中项变更时自动触发逻辑，避免给每个选项单独绑定事件的冗余操作。
3. 语法修正：移除了原代码末尾多余的闭合大括号，修复语法错误。
4. 文本本地化：将原英文选项文本翻译为中文，适配中文使用场景。

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