HTML GET提交表单时去除URL?及参数名仅保留select选中值

要实现自定义路径格式的提交跳转，核心是拦截表单默认的GET提交行为——默认GET提交会自动生成带?和键值对参数的URL，只要阻止这个默认行为，手动取值拼接目标URL再跳转即可，不会影响你已经写好的级联联动逻辑。

1. 先修正现有HTML的笔误 #

你当前的HTML有两处小问题：

• 第二个select下的默认option末尾多了一个多余的双引号
• method="GET"是<form>标签的属性，不需要写在提交按钮上，后续拦截默认提交后这个属性也可以删除

修正后的基础HTML代码：

<form name="marcas" action="https://mytesting.com">
  <select name="marca" onchange="relation()">
    <option value="-">Marca</option>
    <option value="vw">VW</option>
    <option value="nissan">Nissan</option>
    <option value="audi">Audi</option>
    <option value="bmw">BMW</option>
    <option value="buick">Buick</option>
    <option value="chevrolet">Chevrolet</option>
  </select>

  <select name="modelo">
    <option value="modelo">Modelo</option>
  </select>

  <select name="ano">
    <option value="ano">Año</option>
  </select>
  <button class="button1" id="send" type="submit">Buscar</button>
</form>

2. 添加提交拦截逻辑 #

把下面的JavaScript代码放到页面</body>标签之前，或者放到DOM加载完成的回调里即可生效：

const searchForm = document.querySelector('form[name="marcas"]');

searchForm.addEventListener('submit', function(e) {
  // 阻止表单默认提交生成查询参数的行为
  e.preventDefault();

  // 依次获取三个下拉框的当前选中值
  const selectedMarca = this.marca.value;
  const selectedModelo = this.modelo.value;
  const selectedAno = this.ano.value;

  // 按要求拼接目标URL
  const targetPath = [selectedMarca, selectedModelo, selectedAno].join('-');
  const targetUrl = `${this.action}/${targetPath}`;

  // 执行跳转
  window.location.href = targetUrl;
});

可选：添加选项校验 #

如果需要避免用户选中默认占位项就提交，可以在拼接URL前增加校验逻辑，替换上面的事件监听代码即可：

searchForm.addEventListener('submit', function(e) {
  e.preventDefault();
  const selectedMarca = this.marca.value;
  const selectedModelo = this.modelo.value;
  const selectedAno = this.ano.value;

  // 校验是否选中有效选项
  if (selectedMarca === '-' || selectedModelo === 'modelo' || selectedAno === 'ano') {
    alert('请选择完整的品牌、车型和年份信息');
    return;
  }

  const targetPath = [selectedMarca, selectedModelo, selectedAno].join('-');
  window.location.href = `${this.action}/${targetPath}`;
});

效果验证 #

比如选中品牌为vw、车型为sagitar、年份为2024时，最终跳转的URL为https://mytesting.com/vw-sagitar-2024，完全符合需求，不会出现默认GET请求自带的?、marca=、&这类内容。

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