Selecting value in dropdown based on client's timezone (JavaScript)

Question

I have a dropdown that has many time zones as options:

<select data-drupal-selector="edit-field-user-timezone" id="edit-field-user-timezone" name="field_user_timezone">
  <option value="_none" selected="selected"></option>
  <optgroup label="Africa">
    <option value="Africa/Asmara">Asmara</option>
    <option value="Africa/Bamako">Bamako</option>
    <option value="Africa/Bangui">Bangui</option>
    <option value="Africa/Banjul">Banjul</option>

I am trying to autoselect a value based on the client's time zone via JavaScript:

<script>document.getElementById("edit-field-user-timezone").selectedIndex = Intl.DateTimeFormat().resolvedOptions().timeZone</script>

But this is not doing anything. What am I doing wrong?

console.log(Intl.DateTimeFormat().resolvedOptions().timeZone) does indeed output my correct timezone in the same format of the dropdown.

Thanks

Answer 1

Try this:

const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
const option = Object.values(document.getElementById("edit-field-user-timezone").options)
option.map(element => {
    element.value == timezone ? element.selected = true : false      
});

<select data-drupal-selector="edit-field-user-timezone" id="edit-field-user-timezone" name="field_user_timezone">
  <option value="_none" selected="selected"></option>
  <optgroup label="Africa">
    <option value="Africa/Asmara">Asmara</option>
    <option value="Africa/Bamako">Bamako</option>
    <option value="Africa/Bangui">Bangui</option>
    <option value="Africa/Banjul">Banjul</option>
  </optgroup>
</select>