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

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

这有什么帮助。