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侦听器，因此，每当用户更改select上的值时，它将调用该侦听器函数并执行所需的操作。在下面的示例中，我只更改了文档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仅在值更改时触发，如果选择了相同的值，则不会触发，因此不会调用该函数。为避免这种情况，请查看其他监听器，例如onclick或onfocus或onblur

Answer 2

您可以使用onchange事件来引用您选择的功能，例如

<Select id="Selector" onchange="myFunction()">


function myFunction() {
   var x = document.getElementById("Selector").value;
   if(x==='min')
   document.write("Hello World!");
}

Answer 3

您需要将onchange事件侦听器附加到select元素。 http://jsfiddle.net/gj2n6rux/2/

选择选项时运行javascript函数

3 个答案: