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

Question

所以我有一个非常基本的 HTML 表单，我正在尝试弄清楚如果用户在HTML 元素。我对编码非常非常陌生，所以如果它看起来很糟糕请原谅我；但是像这样，假设我希望在选择值为“two”的选项时背景变成红色：

HTML:

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

JavaScript:

   document.getElementById("numberDropdown").value = document.getElementById("numberDropdown").selectedIndex.value;
   if (document.getElementById("numberDropdown").value = "two"){
       document.body.style.backgroundColor = "red";
    };

我真的不知道任何 java 脚本，只是尝试输入一些内容以便您理解问题。感谢您的帮助！

Answer 1

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

const btn = document.querySelector('#btn');
const selector = document.querySelector('#numberDropdown');

btn.onclick = (event) => {
event.preventDefault();
console.log(selector.selectedIndex)
    if (selector.selectedIndex == 2){
        document.body.style.backgroundColor = "red";
    }
};

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

<button id="btn">Get number</button>

Answer 2

您可以将 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>

有很多方法可以做到，据我所知这是最简单的方法。

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

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

How to run a Java Script function if an HTML selector has a specific value?

html

javascript

forms

dom

selectedindex

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

How to run a Java Script function if an HTML selector has a specific value?

html

javascript

forms

dom

selectedindex

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