JS按选择时区更新数字时钟时报无效时区错误如何解决？

错误原因 #

报错是因为document.getElementById('timezone-label')取到的是完整的下拉框DOM元素对象，不是选中的时区字符串值，直接传给toLocaleString的timeZone参数无法被识别，所以抛出无效时区的范围错误。

核心代码修复 #

直接修改changeTimeZone函数，获取下拉框的value属性即可拿到选中的时区值：

function changeTimeZone() {
    // 取下拉框选中值，而非整个DOM元素
    var timeZone = document.getElementById('timezone-label').value;
    // 加空值判断避免异常
    if (!timeZone) return;
    const str = new Date().toLocaleString('it-IT', {
        timeZone: timeZone
    });
    var myArray = str.split(",");
    document.getElementById("time").innerHTML = myArray[1];
}

附带问题修复 #

你当前加载时区选项的AJAX代码存在两个潜在问题，建议同步修改：

1. 循环条件i <= splitData.length会导致数组越界，最后生成一个空值选项
2. 生成的option元素id和下拉框id重复，会导致DOM选择异常
   修改后的AJAX代码：

$.ajax({
    url: 'zone.txt',
    success: function(data) {
        var splitData = data.split("\n");
        // 修改循环条件避免越界
        for(i = 0; i < splitData.length; i++) {
            // 移除option的重复id
            $('#timezone-label').append("<option value='" + splitData[i]  + "'>" + splitData[i] + "</option>");
        }
        // 页面加载完成后默认触发一次，显示初始时区的时间
        changeTimeZone();
    }
});

可选优化（实现时钟实时走时） #

当前代码仅在切换时区时更新一次时间，如果需要时钟实时刷新，可以新增全局变量存储当前时区，加定时器每秒更新时间：

// 全局存储当前选中时区，默认取浏览器本地时区
let currentTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;

// 抽离时钟更新逻辑
function updateClock() {
    if (!currentTimeZone) return;
    const str = new Date().toLocaleString('it-IT', {
        timeZone: currentTimeZone
    });
    var myArray = str.split(",");
    document.getElementById("time").innerHTML = myArray[1];
}

function changeTimeZone() {
    currentTimeZone = document.getElementById('timezone-label').value;
    updateClock();
}

// 每秒刷新一次时钟
setInterval(updateClock, 1000);

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