javascript - 如何在事件监听器中使用 <option> 的值来触发函数

Question

我正在用 Javascript 制作一个小项目，它可以让您单击美国 map 上的某个区域，它会告诉您该区域的时区和本地时间。我还有一个下拉菜单 <select>允许您手动选择时区的框。

我有不同的功能，可以根据单击/选择的时区更新本地时间。例如:

function localTimeAtz () {
    var offset = 9;
    var rawTime = utcTime - (3600000*offset);
    var time = new Date(rawTime);

    document.getElementById("timeZoneName").innerHTML = ("Alaska Standard Time");
    document.getElementById("localTime").innerHTML = (" " + time.getHours() + ":" + time.getMinutes());
  }

  function localTimeHtz () {
    var offset = 10;
    var rawTime = utcTime - (3600000*offset);
    var time = new Date(rawTime);

    document.getElementById("timeZoneName").innerHTML = ("Hawaii Standard Time");
    document.getElementById("localTime").innerHTML = (" " + time.getHours() + ":" + time.getMinutes());
  }

这是每个时区的选择框:

  <select id="tzSelect">
    <option value="localTimePtz">Pacific Time Zone</option>
    <option value="localTimeMtz">Mountain Time Zone</option>
    <option value="localTimeCtz">Central Time Zone</option>
    <option value="localTimeEtz">Eastern Time Zone</option>
    <option value="localTimeAtz">Alaskan Time Zone</option>
    <option value="localTimeHtz">Hawaiian Time Zone</option>
  </select>

我想在每次单击新时区时触发相应的函数，因此每个选项的值与相应函数的名称相同。

然后我尝试了这个:

  var selectBox = document.getElementById("tzSelect");

  selectBox.addEventListener("change", selectBox.selectedIndex.value);

基本上，我正在尝试触发与所选值同名的函数。但我无法让它工作。

知道如何检索选项的值并触发与该值同名的函数吗？

Answer 1

尝试改变这个

selectBox.addEventListener("change", function(){

  //do something 

});

引用

addEventListener, "change" and option selection

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener