我建立了一个专门的电子商务购物车，客户在这里从表中选择多少房间，楼层等，然后计算实时价值。
每个下拉选项的HTML表格条目如下所示
<table>
<td><select onchange="calculateall()" id="roomsclear1" size="1">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select> </td>
</table>
<h1> Total:<h1> <p id="total"> Final Value goes here after calculation of all 20 options</p>
不幸的是，每种类型的清洁服务都有不同的价格，因此我尝试使用此switch语句。
var selectedt = document.getElementsByTagName('select');
function calculateall() {
for (var i = 0; i < selectedt.length; ++i) {
var calcit = selectedt.options[selectedt[i].selectedIndex].value;
var typeid = selectedt[i].id;
switch (typeid) {
case 'roomsclean1':
calcit = calcit * 65;
break;
}
document.getElementById("total").innerHTML = calcit;
}
}
问题：
无论我从表中选择什么选项，我都只会在HTML中将0或1的值写入总数。我认为我正在搞砸Javascript。
switch语句是最有效的选择吗？每个所选房间的价格都有20多个选项，每个价格都有不同
我在这里的临时页面上放了一个购物车示例（慢！）：
52.11.14.57:9000/#
JSfiddle：https ://jsfiddle.net/mvc1poad/
示例中的ID对应于地毯清洁选项卡：rooms（clean）
编辑：Rakesh_Kumar是正确的，问题是缺少parseInt。添加该值可以解决计算值时的问题。
您提到您可以输出实际值（我建议您这样做，因为它会稍微简化您的脚本）。就个人而言，我会在您的元素周围包裹一个元素，select并允许一个change事件bubble启动（而不是像这样的内联事件处理程序calculateall-只是清理HTML）。
就像是：
<form id="ourForm">
<select id="cleaning">
<option value="0">Select cleaning</option>
<option value="0">No cleaning</option>
<option value="10">Cleaning final day only</option>
<option value="50">Cleaning 5 days</option>
</select>
<!-- additional elements here -->
</form>
event listener像这样的简单JS ：
document.forms[0].addEventListener('change', function(e) {
var i = 0,
query = this.querySelectorAll('select'),
len = query.length,
total = 0;
for(; i < len; i++) {
if (parseInt(query[i].value, 10) > 0) {
total += parseInt(query[i].options[query[i].selectedIndex].value, 10);
}
}
// Do something with total here
}, true);
这是一个演示小提琴：http : //jsfiddle.net/sj9o6Lnb/
如果您有兴趣使用乘法器，则可以创建一个map，然后将其乘以这些值。就像是：
var price_map {
rooms_clean: 65,
breakfast: 100
}
然后您通过ID（或其他一些属性）引用价格
for(; i < len; i++) {
total += price_map[query[i].id] * parseInt(query[i].options[query[i].selectedIndex].value, 10);
}
http://jsfiddle.net/sj9o6Lnb/1/
这是根据您的网站（带有四个选项和清除/保护）的更新的小提琴：http : //jsfiddle.net/sj9o6Lnb/2/
以及您创建的经过编辑的提琴：https : //jsfiddle.net/mvc1poad/1/（此处仅根据数据属性进行计算，您需要添加该属性）
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句