javascript - 选择选项时运行 javascript 函数

Question

我想根据下拉菜单中选择的选项来执行功能。现在我只是编写了 document.write() 函数来测试是否发生了任何情况。

但是，没有打印任何内容，并且代码没有按我想要的方式工作。

<h>Would you like to see count values per hour or minute?</h><br>
<Select id="Selector">
   <option value="hr">Hour</option>
   <option value="min">Minute</option>
</Select>
<script>
  if (document.getElementById('Selector').value == "min") {
    document.write("Hello World!");
  }

</script>

Answer 1

为此，您将需要一个 onchange 监听器，因此每次用户更改选择上的值时，它都会调用该监听器函数并执行您需要的操作。在下面的示例中，我只是更改了文档背景，但这足以让您了解逻辑，对吗？

<h>Would you like to see count values per hour or minute?</h><br>
<Select id="Selector">
   <option value="hr">Hour</option>
   <option value="min">Minute</option>
</Select>
<script>
  document.getElementById("Selector").onchange = changeListener;
  
  function changeListener(){
  var value = this.value
    console.log(value);
    
    if (value == "min"){
      document.body.style.background = "red";
    }else if (value == "hr"){
      document.body.style.background = "blue";
    }
    
  }

</script>

注意:onchange仅在值改变时触发，如果选择相同的值，则不会触发，因此不会调用该函数。为了避免这种情况，请查看其他监听器，例如 onclick 或 onfocus 或 onblur