带有 onclick javascript 功能的下拉菜单

Question

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

<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>

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

Answer 1

您可以将事件侦听器附加到选择元素：

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>