无法通过 javascript 更改 <select> 下拉菜单值

Question

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

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 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>

无法通过 javascript 更改 <select> 下拉菜单值

Can't change a <select> dropdown menu value via javascript

html

javascript

select

html-select

drop-down-menu