用開關盒選擇選項計算

Question

我想要做的是有一個下拉菜單，在這種情況下選擇一個選項，我想要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: 
 
     // \t 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" />

Answer 1

你只需要的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開關語句。 編輯 - 使用一個或多個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>標記之後，所以在我的回答的第二個版本，我感動的是進入選項元素的文本。）