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

Question

我有一个专门的电子商务购物车，我在其中为客户 select 提供了 table 的房间、楼层等的数量，然后计算实时价值。

Html table 每个下拉选项的条目如下所示

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

问题：

无论我从 table select 中选择什么选项，我都只会将 0 或 1 值写入 HTML 中的总计。我想我搞砸了 Javascript.
switch 语句是最有效的选择吗？ 20 多个选项，每个选项每个房间的价格都不同 selected

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

52.11.14.57:9000/#

JSfiddle：https://jsfiddle.net/mvc1poad/

示例中的ID对应地毯清洁标签：rooms(clean)

Answer 1

您犯了一个愚蠢的错误，因此您没有得到预期的输出。而不是像这样：

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

做，

var calcit = parseInt(selectedt[i].options[selectedt[i].selectedIndex].value);

而且，除了 switch 用法之外，您还想采用什么其他方法。出于显而易见的原因，switch 比 if-else.

更可取

Answer 2

编辑：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>

还有一个简单的 JS event listener 像这样：

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

这是一个演示 fiddle：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/

这是根据您的网站更新的 fiddle（有四个选项和 clean/protect）：http://jsfiddle.net/sj9o6Lnb/2/

以及您创建的经过编辑的 fiddle：https://jsfiddle.net/mvc1poad/1/（此处仅根据您需要添加的数据属性进行计算）

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

What is best way to select multiple html tags and their value to apply expression in Javascript?

html

javascript

html-table

drop-down-menu