javascript - 当满足条件时，从多个下拉列表中进行选择更新

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