如何正确获取select下拉框选中值 修复currentTz未定义报错

代码运行异常主要是两个原因：

1. 事件绑定写法错误：addEventListener的第二个参数需要传入函数引用，你写的switchTz(xxx)是立即执行函数，执行后返回值是undefined，相当于给change事件绑了空值，后续切换下拉框根本不会触发逻辑。
2. 初始化取值时机不对：如果JS脚本写在页头，执行时select元素还没渲染完成，拿到的元素本身就是null，取value自然是undefined。

HTML部分不需要改动，JS代码替换为以下内容即可：

// 等待DOM渲染完成后再执行逻辑，避免找不到元素
document.addEventListener('DOMContentLoaded', () => {
  const tzSelect = document.getElementById('timezoneSelect')
  // 初始化当前时区，取默认选中值
  let currentTz = tzSelect.value

  // 切换时区的处理函数，事件触发时会自动传入事件对象e
  const handleTzChange = (e) => {
    currentTz = e.target.value
    refreshTime(currentTz)
  }

  // 绑定change事件，注意这里不要加括号，直接传函数名
  tzSelect.addEventListener('change', handleTzChange)

  const refreshTime = (timeZone) => {
    const datetime = new Date()
    document.getElementById('dtime').textContent = datetime.toLocaleString('en-US', { timeZone })
    // 如果要显示LA/NY/LDN这类短名，取选中项的文本即可；要显示完整时区名直接用currentTz
    const selectedLabel = tzSelect.options[tzSelect.selectedIndex].textContent
    document.getElementById('timeLoc').textContent = selectedLabel
  }

  // 页面加载后先渲染一次默认时区的时间
  refreshTime(currentTz)
})

• 用DOMContentLoaded包裹逻辑，保证DOM加载完成后再取元素、绑事件，从根源避免初始化取值为undefined的问题
• 事件触发时通过事件对象e.target.value直接拿下拉框的最新值，保证currentTz和选中项永远同步，不会出现值不一致的情况
• 修正事件绑定写法，只传函数引用不立即执行，切换下拉选项时会正常触发刷新逻辑
• 补全了datetime的变量声明，避免隐式全局变量造成的作用域污染
• 初始化完成后主动调用一次刷新方法，页面打开时就会展示默认时区的时间，不需要用户手动触发
• 兼容显示需求：如果需要展示LA/NY/LDN这类短标识，直接取选中option的文本即可，和下拉框显示内容保持一致；如果需要展示America/Los_Angeles这类完整IANA时区名，直接把timeLoc的赋值内容换成currentTz就行。

内容的提问来源于stack exchange，提问作者displayName is undefined