<select>下拉菜单移动端点击选项无法打开跳转链接问题求助

问题原因 #

• iOS Safari有严格的弹窗拦截规则：只有用户直接主动触发的点击事件同步调用的window.open('_blank')才会被放行，select的change事件是选择完成后触发的，不属于这类直接交互，调用的新窗口会被默认拦截，所以看起来点击没反应。
• 原代码里的val变量没有用let/const声明，属于隐式全局变量，部分老旧浏览器下也可能引发执行异常。

修复方案 #

如果你的跳转不需要新开窗口，直接替换window.open为window.location.href是最简单的兼容方案，改后的JS代码如下：

document.getElementById('SelectOption').addEventListener('change', function () {
  const val = $("#SelectOption").val();
  console.log(val)
  if (val === '#About') { window.location.href = 'https://www.google.com'; }
  if (val === '#News') { window.location.href = 'https://www.google.com'; }
  if (val === '#Track') { window.location.href = 'https://www.google.com'; }
  if (val === '#Shipping') { window.location.href = 'https://www.google.com'; }
  if (val === '#Refund') { window.location.href = 'https://www.google.com'; }
  if (val === '#Terms') { window.location.href = 'https://www.google.com'; }
  if (val === '#Privacy') { window.location.href = 'https://www.google.com'; }
  if (val === '#Contact') { window.location.href = 'https://www.google.com'; }
});

如果必须要新开窗口，可以用下面的兼容写法，先提前创建空窗口再赋值地址，避开Safari的拦截规则：

document.getElementById('SelectOption').addEventListener('change', function () {
  const val = $("#SelectOption").val();
  const newWindow = window.open('', '_blank'); // 同步先创建空窗口，不会被拦截
  console.log(val)
  if (val === '#About') { newWindow.location.href = 'https://www.google.com'; }
  if (val === '#News') { newWindow.location.href = 'https://www.google.com'; }
  // 剩余判断逻辑和上面一致，统一替换为newWindow.location.href赋值即可
});

优化建议 #

可以用对象映射代替多个if判断，代码更简洁好维护：

document.getElementById('SelectOption').addEventListener('change', function () {
  const urlMap = {
    '#About': 'https://www.google.com',
    '#News': 'https://www.google.com',
    '#Track': 'https://www.google.com',
    '#Shipping': 'https://www.google.com',
    '#Refund': 'https://www.google.com',
    '#Terms': 'https://www.google.com',
    '#Privacy': 'https://www.google.com',
    '#Contact': 'https://www.google.com'
  }
  const val = $(this).val();
  if (urlMap[val]) window.location.href = urlMap[val];
  // 选完后重置select选中状态到默认项，方便下次选择同一项也能触发跳转
  $(this).val('');
});

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