如何使用JavaScript根据客户端时区自动选中下拉框的对应时区选项

错误原因 #

selectedIndex 是用来设置下拉框选中项的数字序号的属性，只能传入整数（比如第一个选项传0，第二个传1），你给它传入了时区字符串，类型不匹配，所以代码没有效果。

修复方案 #

你已经确认获取到的时区字符串和下拉框option的value格式完全一致，直接给select元素的value属性赋值即可：

document.getElementById("edit-field-user-timezone").value = Intl.DateTimeFormat().resolvedOptions().timeZone

如果需要做兼容处理，避免下拉框不存在对应时区选项时报错，也可以增加判断逻辑，同时避免代码在DOM渲染完成前执行、找不到下拉框元素的问题：

document.addEventListener('DOMContentLoaded', () => {
  const timezoneSelect = document.getElementById('edit-field-user-timezone')
  const clientTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone
  // 先确认下拉框存在，且存在对应时区的选项，再执行赋值
  if (timezoneSelect && [...timezoneSelect.options].some(opt => opt.value === clientTimezone)) {
    timezoneSelect.value = clientTimezone
  }
})

内容的提问来源于stack exchange，提问作者MultiformeIngegno