如何编写JS重定向规则使双下拉组合URL参数始终按固定顺序排列

要实现统一顺序的组合URL，你可以从两个环节处理：

1. 表单提交环节直接生成标准顺序URL，从根源避免逆序地址产生
2. 组合页面加载环节做兜底校验，逆序地址自动跳转到标准地址

优化后的表单提交逻辑 #

替换你原来的script部分即可，这个修改完成后，用户不管是先选A再选B，还是先选B再选A，最终跳转到的都是a-b结尾的URL，基本覆盖正常操作场景：

<script type='text/javascript'> 
const form  = document.getElementById('form-dropdown');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  // 读取两个下拉框的选中值
  const selectVal1 = document.getElementById('my-menu-1').value;
  const selectVal2 = document.getElementById('my-menu-2').value;
  // 对两个值做字典序排序，保证无论选择顺序如何，拼接出来的URL顺序统一
  const sortedVals = [selectVal1, selectVal2].sort();
  const targetUrl = `https://www.example.com/combo/${sortedVals[0]}-${sortedVals[1]}/`;
  window.location.replace(targetUrl); 
});
</script>

兜底逆序URL重定向逻辑 #

如果需要兼容用户手动输入、收藏夹里留存的逆序URL，可以在/combo/对应页面加入以下JS逻辑，页面加载时自动校验重定向：

window.addEventListener('load', () => {
  // 提取URL中的组合字段
  const pathParts = location.pathname.split('/').filter(part => part.length);
  const comboStr = pathParts[pathParts.length - 1];
  if (!comboStr || !comboStr.includes('-')) return;
  
  const [valA, valB] = comboStr.split('-');
  const standardStr = [valA, valB].sort().join('-');
  // 当前路径不是标准顺序时触发重定向
  if (comboStr !== standardStr) {
    location.replace(location.href.replace(comboStr, standardStr));
  }
})

如果有服务端配置权限，也可以直接在Nginx/Apache层面写重定向规则，性能比前端重定向更好，也更有利于SEO。

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