添加元素位置调整功能：将本地时间选项移至欧洲分组下

需求：当用户所在地区属于欧洲时，将时区选择框中的“Local Time”选项移动至“Europe”分组下。

实现代码 #

HTML 结构

<select id="timezone" onkeyup="filterFunction(this,event)" onchange="changeTimezone()">
  <option value="local" selected>Local Time</option>
  <optgroup label="Europe" id="europe-optgroup">
    <option value="GMT">London</option>
    <option value="Europe/Amsterdam">Amsterdam</option>
    <option value="Europe/Athens">Greece</option>
    <option value="Europe/Moscow">Moscow</option>
  </optgroup>
  <optgroup label="USA">
    <option value="America/New_York">New York</option>
    <option value="America/Los_Angeles">Las Vegas</option>
  </optgroup>
</select>

JavaScript 逻辑

var userCountry = ""; // 在此存储用户所在国家（例如通过地理定位API或IP地址查询获取）

// 欧洲国家列表
var europeanCountries = ["Austria", "Belgium", "Bulgaria", "Croatia", "Cyprus", "Czech Republic", "Denmark", "Estonia", "Finland", "France", "Germany", "Greece", "Hungary", "Ireland", "Italy", "Latvia", "Lithuania", "Luxembourg", "Malta", "Netherlands", "Poland", "Portugal", "Romania", "Slovakia", "Slovenia", "Spain", "Sweden"];

// 判断用户是否在欧洲，是则移动Local Time选项到Europe分组
if (europeanCountries.includes(userCountry)) {
  var localOption = document.querySelector("#timezone [value=local]");
  var europeOptgroup = document.getElementById("europe-optgroup");
  europeOptgroup.appendChild(localOption);
}

补充说明 #

• 需先通过合适方式填充userCountry变量，比如使用浏览器地理定位API获取用户位置后解析国家，或者调用IP地址查询服务获取所属国家（注意处理用户权限与隐私问题）。
• 代码会在页面加载时执行判断逻辑，确保符合条件时自动调整选项位置。

内容的提问来源于stack exchange，提问作者Hidde