选择带开关箱的选项计算

Select option calculation with switch case

本文关键字：选项 计算 开关箱 选择      更新时间：2023-09-26

我要做的是有一个下拉菜单，在这种情况下选择一个选项，我想要2瓶jwWhisky。然后，我希望它进入js，并让开关箱输入瓶子的价格，并将其乘以我想要的瓶子。

HTML: 

function calculate() {
  "use strict"
  var myBox1 = document.getElementById('drinks1Num').value;
  var myBox2 = document.getElementById('drinks1Type').value;
  var result = document.getElementById('result');
  var myResult = myBox1 * myBox2;
  var inputCost = 0;
  switch (myBox2) {
    case 'jwWhisky':
      inputCost = 49;
      break
      //default:
      // 	alert ("You haven't coded this yet");
  }
  result.value = myResult;
}
<legend>
  Sprits Option
</legend>
<select id="drinks1Num" onchange="calculate()">
  <option value="0">--- Select ---</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<select id="drinks1Type" onchange="calculate()">
  <option value="0">--- Select ---</option>
  <option disabled="disabled"></option>
  <optgroup label="whisky">
    <option value="jwWhisky">Johnnie Walker 700ml</option>49$
  </optgroup>
</select>
<input id="result" />

你只需要把myBox1 * inputCost的计算移到你的开关后:

function calculate() {
        "use strict"
        var myBox1 = document.getElementById('drinks1Num').value;   
        var myBox2 = document.getElementById('drinks1Type').value;
        var result = document.getElementById('result'); 
        var inputCost=0;
  
        switch (myBox2) {
            case 'jwWhisky':
                inputCost=49;
                break
            //default:
            //  alert ("You haven't coded this yet");
        }
        result.value = myBox1 * inputCost;
}
<select id="drinks1Num" onchange="calculate()">
  <option value="0">--- Select ---</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<select id="drinks1Type" onchange="calculate()">
  <option value="0">--- Select ---</option>
  <option disabled="disabled"></option>
  <optgroup label="whisky">
    <option value="jwWhisky">Johnnie Walker 700ml</option>49$
  </optgroup>
</select>
<input id="result" "/>

(而且，正如您所看到的，您根本不需要myResult变量。)

注意，将价格存储为每个选项元素的data-属性可能会更好，因为这样可以将产品信息保存在HTML中的一个地方，并且不需要JS switch语句。EDIT -使用一个或多个data-属性可以让你添加额外的信息，这些信息不会与表单一起提交，但可以用于你的JS中的计算，而value属性仍然可以用于产品代码(并将被提交)。也许像这样:

function calculate() {
  "use strict";
  var num = document.getElementById('drinks1Num').value;   
        
  var drinkType = document.getElementById('drinks1Type');
  var unitCost = drinkType.options[drinkType.selectedIndex].getAttribute('data-cost');
  document.getElementById('result').value = num * unitCost;
}
<select id="drinks1Num" onchange="calculate()">
  <option value="0">--- Select ---</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<select id="drinks1Type" onchange="calculate()">
  <option value="0">--- Select ---</option>
  <option disabled="disabled"></option>
  <optgroup label="whisky">
    <option value="jwWhisky" data-cost="49">Johnnie Walker 700ml ($49)</option>
    <option value="something" data-cost="22">Something else ($22)</option>
  </optgroup>
</select>
<input id="result" "/>

(还请注意，在您的原始HTML中，您在之后有49$ 关闭</option>标记，因此在我的回答的第二个版本中，我已将其移动到选项元素的文本中。)

相关文章：