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

Question

我有一个包含多个时区选项的下拉列表：

<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) 确实以与下拉列表相同的格式输出了我正确的时区。

谢谢

Answer 1

selectedIndex 为您提供当前 selected 选项的数字索引。这是一个只读属性。要自动 select 一个选项，您必须向其添加 selected 属性。在这种情况下，您必须找到值与时区匹配的选项（或选项的索引），然后切换该选项的 selected 属性。

像这样：

const options = [...document.getElementById('my-select').children]

const targetedValue = 'b' // equivalent to time zone in your case

const desiredOption = options.find(option => option.value === targetedValue)

desiredOption.selected = true

<select id="my-select">
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>

Answer 2

试试这个：

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>

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

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

javascript

getelementbyid

datetime-format