選擇所有選擇框（JavaScript）

Question

我有一個網頁，需要在其中添加每個選擇項。 因此，例如，如果有人選擇A，那么它將為最終值加上90。 目前，我通過添加每個選擇框的每個ID手動完成此操作（請參見下面的代碼），但是現在我有很多選擇框，我認為我需要一個更好的方法！ 提前致謝！

我當前擁有的代碼片段（theory1是選擇框的ID）：

var t1 = document.getElementById('theory1');
var tnum1 = 0;

        if(t1.options[t1.selectedIndex].value == "Grade 6 - Distinction"){
        tnum1 = tnum1+15;
        }

        if(t1.options[t1.selectedIndex].value == "Grade 6 - Merit"){
        tnum1 =tnum1+10;
        }

        if(t1.options[t1.selectedIndex].value == "Grade 6 - Pass"){
        tnum1 = tnum1+5;
        } document.getElementById('add').innerHTML = tnum1;

Answer 1

您應該為該解決方案使用詞典

var action;
action["Grade 6 - Distinction"] = 15;
action["Grade 6 - Merit"] = 10;
action["Grade 6 - Pass"] = 5;

var selectedValue = t1.options[t1.selectedIndex].value;
tnum1 = tnum1 + action[selectedValue];
document.getElementById('add').innerHTML = tnum1;

Answer 2

您可能想看看jQuery或類似的東西。 它使您可以輕松地遍歷具有特定類的文檔中的所有元素，而這可能正是您想要的。 （您還需要一種將值映射為數字的方法；例如，將其編碼為單個函數。）

Answer 3

您可以將選項的值設為要添加的值。

<select id="theory1">
  <option value="15">Grade 6 - Distinction</option>
  ...
</select>

然后遍歷選擇並累加值

var selects = document.getElementsByTagName('select');
var tnum1 = 0;
for (var i = 0; i < selects.length; i++){
    tnum1 += +selects[i].value;
}
document.getElementById('add').innerHTML = tnum1;