使用onclick javascript函数下拉菜单 [英] drop down menu with onclick javascript functions

问题描述

我试图创建一个下拉菜单，单击时调用JavaScript函数。我的下拉菜单是这样的：

 < select name =navyOp> 
< option selected =selected>选择海军作业区域< / option> 
< option value =AN01> AN01< / option> 
< option value =AN02> AN02< / option> 
< option value =AN03> AN03< / option> 
< / select> 
  

因此，对于每个选项，我都希望调用特定的JavaScript函数。有没有简单的方法来做到这一点？

解决方案

您可以附加一个事件侦听器来选择元素：

window.test = function（e）{if（e.value ==='AN01'） {console.log（e.value）; } else if（e.value ==='AN02'）{console.log（e.value）; } else if（e.value ==='AN03'）{console.log（e.value）; }}

< select name =navyOponchange = 测试（本）; > < option selected =selected>选择海军作业区域< / option> < option value =AN01> AN01< / option> < option value =AN02> AN02< / option> < option value =AN03> AN03< / option>< / select>

I'm trying to create a drop down menu that calls a JavaScript function when clicked. My drop down menu is like this:

<select name = "navyOp"> 
    <option selected = "selected">Select a Navy Op Area</option>
    <option value = "AN01">AN01</option>
    <option value = "AN02">AN02</option>
    <option value = "AN03">AN03</option>
</select>

So for each of this options, I want a specific JavaScript function to be called. Is there a simple way to do this?

解决方案

You can attach an event listener to select element:

window.test = function(e) {
  if (e.value === 'AN01') {
    console.log(e.value);
  } else if (e.value === 'AN02') {
    console.log(e.value);
  } else if (e.value === 'AN03') {
    console.log(e.value);
  }
}

<select name="navyOp" onchange="test(this);">
  <option selected="selected">Select a Navy Op Area</option>
  <option value="AN01">AN01</option>
  <option value="AN02">AN02</option>
  <option value="AN03">AN03</option>
</select>

这篇关于使用onclick javascript函数下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！