Javascript 如果HTML选择器具有特定值，如何运行Java脚本函数？

所以我有一个非常基本的HTML表单，我试图弄清楚如果用户在HTML元素中选择了一个具有特定值的特定值，如何运行JS函数。我对编码非常、非常陌生，所以如果它看起来很糟糕，请原谅我；但是类似这样的情况，比如我希望在选择值为“2”的选项时背景变为红色：

HTML:

---

我真的不知道任何java脚本，只是试着键入一些东西，以便您能够理解这个问题。谢谢你的帮助

您可以使用按钮来处理事件并获取选择器的选定索引的值

const btn=document.querySelector（'#btn'）；
常量选择器=document.querySelector（“#numberDropdown”）；
btn.onclick=（事件）=>{
event.preventDefault（）；
console.log（选择器.selectedIndex）
如果（selector.selectedIndex==2）{
document.body.style.backgroundColor=“红色”；
}
};

0
1.
2.
3.
Get number
您可以将javascript代码包装在函数中，并在select标记上使用onchange属性。因此，每当select标记的值发生变化时，您的函数就会执行

function changeColour() {
   let selectElement = document.getElementById("numberDropdown")
   let selectedValue = selectElement.options[selectElement.selectedIndex].value;
   if (selectedValue === "two"){
    document.body.style.backgroundColor = "red"
   }
 }

您可以将html更改为

 <select id="numberDropdown" onchange="changeColour()">
 <option disabled selected>0</option>
 <option value="one">1</option>
 <option value="two">2</option>
 <option value="three">3</option>
 </select> 


0
1.
2.
3.

有很多方法可以做到这一点，据我所知，这是最简单的方法。
每次选择新值时，都应更新此方法

const selectElement = document.getElementById("numberDropdown");

selectElement.addEventListener('change', (event) => {
  let val = selectElement.options[selectElement.selectedIndex].value;
  if (val == "two"){
      document.body.style.backgroundColor = "red";
  }
});

非常感谢你！！！！代码运行得很好。现在我可以玩它，真正学到一些东西。你太棒了，万分感谢！让您向我展示特定于我的情况的代码确实帮助我了解了如何将JS与HTML结合使用！我非常感激！就像你说的，有很多方法可以做到这一点，所以我很感激这个简单的方法，我可以遵循。再次感谢！！！
 <select id="numberDropdown" onchange="changeColour()">
 <option disabled selected>0</option>
 <option value="one">1</option>
 <option value="two">2</option>
 <option value="three">3</option>
 </select> 

const selectElement = document.getElementById("numberDropdown");

selectElement.addEventListener('change', (event) => {
  let val = selectElement.options[selectElement.selectedIndex].value;
  if (val == "two"){
      document.body.style.backgroundColor = "red";
  }
});