JavaScript如何获取下拉框选中值 实现不同食材单位换算系数匹配

修改后完整可运行代码 #

<select name="ingredients" id="ingredients" onchange="weightConverter(document.getElementById('inputPounds').value)">
          <option value="flour">All Purpose Flour</option>
          <option value="sugar">Cane Sugar</option>
          <!-- 后续新增配料只要在这里加option即可，value和下方系数对象的键对应就行 -->
</select>

<p>
  <label>Pounds</label>
   <input id="inputPounds" type="number" placeholder="Pounds" oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
</p>
<p>Ounces: <span id="outputOunces"></span></p>

<script>
    // 统一管理所有配料对应的换算系数，后续新增配料只要在这里加键值对即可
    const ingredientMultiplier = {
        flour: 4.409245,
        sugar: 8.82
    }

    function weightConverter(valNum) {
      // 处理输入为空的情况，避免显示NaN
      if (!valNum || isNaN(valNum)) {
          document.getElementById("outputOunces").innerHTML = ''
          return
      }
      // 获取当前选中的配料value
      const selectedIngredient = document.getElementById('ingredients').value
      // 取出对应的换算系数
      const multiplier = ingredientMultiplier[selectedIngredient]
      // 计算并输出结果，toFixed可以按需调整保留小数位数，不需要可以直接删掉
      document.getElementById("outputOunces").innerHTML = (valNum * multiplier).toFixed(2)
    }
</script>

核心修改说明 #

• 给下拉框新增了onchange事件监听，切换配料选项时会自动用当前已输入的磅数重新计算结果，无需用户重新输入
• 新增ingredientMultiplier对象统一维护所有配料的换算系数，后续扩展时不需要修改计算逻辑
• 增加了非法输入判断，避免输入为空时页面显示NaN
• 新增结果保留2位小数的逻辑，可根据需求调整toFixed的参数或者直接删除不保留小数

后续新增配料操作步骤 #

1. 在<select>标签内新增<option>，自定义value值和显示的配料名
2. 在ingredientMultiplier对象内新增一行[你定义的option的value]: [对应的换算系数]即可

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