选择多个html标记及其值以在Javascript中应用表达式的最佳方法是什么？

我有一个专门的电子商务购物车，客户可以从表中选择房间、楼层等的数量，然后计算live的价值

每个下拉选项的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>

不幸的是，每种类型的清洁服务都有不同的价格点，所以我尝试了这个切换语句

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的值写入total。我想我把Javascript搞砸了

switch语句是最有效的选项吗？20多个选项，每个选项根据所选房间的不同定价

我在这里的临时页面上放了一个购物车的例子慢！：

52.11.14.57:9000/

JSfiddle：

---

示例中的ID对应于地毯清洁选项卡：roomsclean

您犯了一个愚蠢的错误，因此无法获得预期的输出。 而不是像这样做：

//selectedt is HTMLCollection having list of all elements with tag "select"
//& typeof calcit is String, which you need to make a number before multiplying with 65
var calcit = selectedt.options[selectedt[i].selectedIndex].value;

做

---

此外，除了使用交换机外，您还想采取什么其他方法。出于明显的原因，switch比if-else更可取。

编辑：Rakesh_Kumar是正确的，问题是缺少parseInt。添加该选项可以解决计算值时的问题

您提到您可以输出我建议的实际值，因为它会稍微简化您的脚本。就我个人而言，我会在select元素周围包装一个元素，并允许一个更改事件冒泡出现，而不是像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>

var price_map {
    rooms_clean: 65,
    breakfast: 100
}

这里有一个小提琴演示：

如果您对使用乘数感兴趣，可以创建一个映射，然后将值乘以。比如：

<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>

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);
}

这是一个基于您的网站的更新版本，有四个选项和清洁/保护：

---

还有您创建的一个编辑过的小提琴：这里的小提琴只是根据数据属性进行计算，您需要添加它

您能将实际值输出到您的输入中吗？或者，您是否计划在JavaScript中定义价格并将其乘以？此外，您将有多个选择？是的，多个选择；这个页面加载速度慢！有我正在处理的表：。如果通过id匹配特定元素并删除switch语句，则可以输出实际值；我想我在javascript中犯了一个错误。我编辑了我的答案，但这里有一个基于您创建的更新的fiddle：我不是switch语句，而是从select元素的data attr中提取值。我仍然得到一个0的最终值。奇怪；它只返回更改时的第一个值，但不返回*65，之后它将不会再次尝试。它在fiddle中工作，但在我的网站上不工作…你能做一个fiddle并共享吗…这将更好地检查。你的calculateall函数本身在第一点没有被触发。你需要删除窗口中的函数定义。onLoad我已经尝试了html onchange和javascript的事件处理程序，但它仍然不工作。这是一个AngularJS网站，也许这就是原因？