选择选项时运行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侦听器，因此每次用户更改选择上的值时，它都会调用该侦听器函数并执行您需要的操作。在我下面的示例中，我只是更改了 document background，但足以让您了解逻辑，对吗？

<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仅在值变化时触发，如果选择相同的值，则不会触发，因此不会调用该函数。为避免这种情况，请查看其他侦听器，例如onclickoronfocus或onblur