Tengo un menú desplegable de selección en mi sitio web y cuando presiono el botón de cancelar por alguna razón, el valor no vuelve a cambiar a su marcador de posición. Intenté reemplazar el .value de él en mi código javascript. Desafortunadamente, stackoverflow no está ejecutando mi código correctamente, pero el evento de clic funciona en mi sitio web. Simplemente borra el menú de selección y está en blanco en lugar de decir "Seleccionar zona horaria". ¿Alguna sugerencia de lo que podría estar haciendo mal?
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>Para probar, deshabilité su almacenamiento local ya que no funciona en los fragmentos.
Simplemente puede usar element.selectedIndex = 0; para seleccionar la primera opción en una selección
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>