通过JavaScript修改<select>下拉菜单值无效 重置后显示空白

下拉框重置后显示空白，是两个问题叠加导致的：

• 你在JS里写的赋值目标是'Select Timezone'，但HTML里占位option的实际文本是Select a Timezone，差了一个冠词a，根本匹配不到任何选项，浏览器找不到对应option就会渲染为空白无选中状态。
• 你的占位option加了disabled属性，就算你把赋值字符串写对，部分浏览器也会拦截JS直接选中禁用选项的操作，还是会重置失败。

推荐用最稳妥的索引重置方案，不需要改动现有HTML结构，兼容性最好：
直接把取消按钮的点击事件回调改成下面的代码，通过selectedIndex属性指定选中第一个选项（也就是你的占位提示项），绕开value匹配和禁用选项的限制：

cancel.addEventListener('click', () => {
    localStorage.clear();
    // selectedIndex从0开始计数，0对应第一个option，也就是你的占位提示
    zone.selectedIndex = 0;
});

如果你更习惯用value赋值的写法，就先给占位option加一个固定的value属性，修改HTML如下：

<select class="form-field" id="timezone">
    <!-- 给占位项加明确的value，比如空字符串方便识别 -->
    <option value="" disabled selected>Select a Timezone</option>
    <option>Eastern</option>
    <option>Western</option>
    <option>PDT</option>
    <option>EST</option>
</select>

然后把JS里的重置赋值改成匹配这个value即可：

cancel.addEventListener('click', () => {
    localStorage.clear();
    zone.value = '';
});

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