不能换一个<select>通过javascript的下拉菜单值

Question

我的网站上有一个选择下拉菜单，当我出于某种原因点击取消按钮时，该值不会变回它的占位符。 我试图在我的 javascript 代码中替换它的 .value 。 不幸的是，stackoverflow 没有正确运行我的代码，但点击事件在我的网站上有效。 它只是清除选择菜单并且是空白的，而不是说“选择时区”。 关于我可能做错的任何建议？

 const cancel = document.getElementById("cancel"); let zone = document.getElementById("timezone"); var zoneVal = localStorage.getItem("timezone"); cancel.addEventListener('click', () => { localStorage.clear(); zone.value = 'Select Timezone'; });

 <select class="form-field" id="timezone"> <option disabled selected>Select a Timezone</option> <option>Eastern</option> <option>Western</option> <option>PDT</option> <option>EST</option> </select> <button class="button-disabled" id="cancel">Cancel</button>

Answer 1

为了测试，我禁用了您的本地存储，因为它在片段中不起作用。

您可以只使用element.selectedIndex = 0; 选择 select 中的第一个选项

 const cancel = document.getElementById("cancel"); let zone = document.getElementById("timezone"); var zoneVal ="";// localStorage.getItem("timezone"); cancel.addEventListener('click', () => { // localStorage.clear(); zone.selectedIndex = 0; });

 <select class="form-field" id="timezone"> <option disabled >Select a Timezone</option> <option selected>Eastern</option> <option>Western</option> <option>PDT</option> <option>EST</option> </select> <button class="button-disabled" id="cancel">Cancel</button>