I have a select dropdown on my website and when I hit the cancel button for some reason the value does not change back to it's placeholder. I attempted to replace the .value of it in my javascript code. Unfortunately stackoverflow isn't running my code properly but the click event works on my website. It just clears the select menu and is blank instead of saying "Select Timezone". Any suggestions of what I could be doing wrong?
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>For testing, I disabled your localstorage since it doesn't work in the snippets.
You can just use element.selectedIndex = 0; to select the first option in a 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>