我想要做的是有一个下拉菜单,选择一个选项,在本例中我想要 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 语句。 编辑 - 使用一个或多个 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>
,因此在我答案的第二个版本中,我已将其移至选项的文本中元素。)
关于javascript - 使用 switch case 选择选项计算,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39628774/