时间戳

首页 > 解决方案 > 根据客户端的时区 (JavaScript) 在下拉列表中选择值

javascript - 根据客户端的时区 (JavaScript) 在下拉列表中选择值

问题描述

我有一个下拉列表，其中包含许多时区作为选项：

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

我正在尝试通过 JavaScript 根据客户端的时区自动选择一个值：

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

但这并没有做任何事情。我究竟做错了什么？

console.log(Intl.DateTimeFormat().resolvedOptions().timeZone)确实以与下拉列表相同的格式输出我的正确时区。

谢谢

标签： javascriptdatetime-formatgetelementbyid

解决方案

尝试这个：

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>

推荐阅读