Question

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

＆＃13;

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';
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

我想javascript函数应该通过onchange之外的其他内容调用，不仅要在手动更改选择之前发生，还要知道如何继续。

Answer 1

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

下拉列表和内容按国家/地区更改

1 个答案: