JavaScript : 如何获取选中的下拉值？

Question

我正在使用 w3schools 的代码并尝试对其进行修改，以便脚本将根据从下拉列表中选择的值乘以不同的 valNum。因此，如果选择 All Purpose Flour，则输出 = 输入乘以 4.409245；对于 Cane Sugar，输出 = 输入乘以 8.82.

这是我目前所拥有的。我计划向列表中添加更多选项值，但需要帮助来确定如何执行此操作。我是 JavaSript 的新手；对不起，如果这看起来很奇怪。任何反馈表示赞赏。谢谢！

<select name="ingredients" id="ingredients">
          <option value="flour">All Purpose Flour</option>
          <option value="sugar">Cane Sugar</option>
</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>
    function weightConverter(valNum) {
      document.getElementById("outputOunces").innerHTML=valNum*4.409245;
    }
 </script>

Answer 1

请使用此代码。

function selectionChange() {
  weightConverter(document.getElementById("inputPounds").value);
}

function weightConverter(valNum) {
  if (document.getElementById("ingredients").value == "flour")
    document.getElementById("outputOunces").innerHTML = valNum * 4.409245;
  else
    document.getElementById("outputOunces").innerHTML = valNum * 8.82;
}

<select name="ingredients" id="ingredients" onchange="selectionChange()">
  <option value="flour">All Purpose Flour</option>
  <option value="sugar">Cane Sugar</option>
</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>

Answer 2

使用一些提示更新了您的代码 -

要添加另一个选项，例如乘数为 2 的 Cheese，您只需在 select 元素下的 HTML 中添加该选项，然后在 case 中添加一个新的 case =12=] 语句如下代码所示。
为 select 组件的 onChange 添加了方法 weightConverter 用于用户先在输入框中输入某个值然后决定改变主意并更改值的情况select 组件，它会在更改 select 组件中的选项后重新评估输出。

<select name="ingredients" id="ingredients" onChange="weightConverter()">
  <option value="flour">All Purpose Flour</option>
  <option value="sugar">Cane Sugar</option>
  <option value="cheese">Cheese</option>
</select>
<p>
  <label>Pounds:</label>
  <input id="inputPounds" type="number" placeholder="Pounds" oninput="weightConverter()">
</p>
<p>Ounces: <span id="outputOunces"></span></p>


<script>
  function weightConverter() {
    const dropDownValue = document.getElementById('ingredients').value;
    const valNum = document.getElementById('inputPounds').value;
    let multiplier = 0;
    switch (dropDownValue) {
      case 'flour':
        multiplier = 4.409245;
        break;
      case 'sugar':
        multiplier = 8.82;
        break;
      case 'cheese':
        multiplier = 2;
        break;
      default:
        break;
    }
    document.getElementById("outputOunces").innerHTML = valNum * multiplier;
  }
</script>

Answer 3

您可以尝试以下代码段。

function selectionChange() {
    weightConverter(document.getElementById("inputPounds").value);
}
function weightConverter(valNum) {
    if (document.getElementById("ingredients").value == "flour"){
        document.getElementById("outputOunces").innerHTML = (valNum * 4.409245).toFixed(6);
    }
    else{
        document.getElementById("outputOunces").innerHTML=(valNum*8.82).toFixed(6);
    }
}

<select name="ingredients" id="ingredients" onchange="selectionChange()">
    <option value="flour">All Purpose Flour</option>
    <option value="sugar">Cane Sugar</option>
</select>

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

JavaScript : 如何获取选中的下拉值？

JavaScript : How to get selected dropdown value?

javascript

calculated-field

dropdown