滿足條件時從多個下拉列表中進行選擇更新

Question

我覺得這個問題很模糊，我很抱歉，因為我似乎想不出更好的名字。

咳咳。 至於實際問題。 我有兩個下拉菜單，我想這樣做，以便每當我在每個下拉菜單中都有正確的值時，例如。 Level 1和Barbarian ，它更新連接的字段。 這對我這里的東西很好用，但問題是，如果我讓Barbarian並將級別更改為Level 2 ，它不會更新連接的字段，直到Barbarian切換到其他東西然后放回去關於Barbarian 。 當字段對於特定設置正確時，如何使其正確更新？ 我假設某種聽眾，但我真的不太了解 Javascript，因為我是新手。

function classDefine(){
var playerClass = document.getElementById('class').value;
var playerLevel = document.getElementById('level').value;
if (playerClass == "Barbarian" && playerLevel == "Level 1") {
document.getElementById("fort").value = 2;
document.getElementById("ref").value = 2;
document.getElementById("will").value = 2;
document.getElementById("baseAttackBonus").value = 2;
}
else if (playerClass == "Barbarian" && playerLevel == "Level 2"){
document.getElementById("fort").value = 5;
document.getElementById("ref").value = 5;
document.getElementById("will").value = 5;
document.getElementById("baseAttackBonus").value = 5;
}
}

Answer 1

您可以在每個選擇框上使用 onChange 偵聽器以在其中任何一個發生更改時運行該函數。

<select id="class" onChange="classDefine()">
    <option>...</option>
</select>

或在 javascript 中

document.getElementById('class').addEventListener("change", classDefine);

Answer 2

您可以使用在下拉列表中進行新選擇時激活的更改事件處理程序。 您可以為每個下拉列表添加一個，然后放置用於解決兩者之間相應匹配的邏輯。 下面是如何將事件處理程序附加到其中之一的示例。

document.getElementById('class').addEventListener("change", function (event) {
     //your logic
     alert("something new was selected"); 
});

這有什么幫助。