下拉菜单和内容按国家/地区更改

Question

我有一个下拉菜单，可根据此处看到的所选选项（在本例中为 3 个可用国家/地区）更改内容：

function hideAllContent(){
  Array.prototype.forEach.call(document.getElementById('locations').children, function(v){
    v.style.display = 'none';
  })
}
function openCountry(divId){
  var el = document.getElementById(divId);
  if(el){
    hideAllContent();
    el.style.display = 'block';
  }
}

.country {
  display: none;
}
.country:first-child {
  display: block;
}

<select onchange="openCountry(value);">
  <option value="GT">Guatemala</option>
  <option value="HN">Honduras</option>
  <option value="SV">El Salvador</option>
</select>

<div id="locations">
  <div id="GT" class="country">
    Content for Guatemala
  </div>
  <div id="HN" class="country">
    Content for Honduras
  </div>
  <div id="SV" class="country">
    Content for El Salvador
  </div>
</div>

我想添加自动国家检测，以便在下拉列表中选择用户的国家，并且国家 div 也会发生变化。 我能够使用this codepen 中的资产按国家/地区自动更改下拉列表，但在手动选择国家/地区之前，div 不会更改，而且 freegeoip.net/json 很快就会被弃用； ipinfo.io/json 似乎也在做同样的事情，here's 就是一个例子，以防万一。

我想应该通过 onchange 以外的方式调用 javascript 函数，这样不仅会在手动更改选择之前发生，而且不知道如何继续。

Answer 1

我找到了答案here... IF 语句来显示独立于下拉列表的内容 div 和用于更改下拉列表的另一行。