如何创建带二级选项的HTML表单选择器并实现POST提交

核心思路 #

利用data-*属性存储每个选项的提交值，通过原生JavaScript监听点击事件，把选中的值写入隐藏的#Vehicle输入框，表单提交时就会自动带上这个值。

第一步：修改HTML，给选项添加提交值 #

给每个<a>标签加上data-value属性（用来定义该选项提交到后台的实际值，可与显示文本一致或自定义），同时补全缺失的闭合标签：

<form method="POST" action="your-handler.php">
  <ul class="vehicle-select">
    <li><a href="#" data-value="lorry">Lorry</a></li>
    <li>
      <a href="#" data-value="car">Car</a>
      <ul>
        <li><a href="#" data-value="car-saloon">Saloon</a></li>
        <li><a href="#" data-value="car-coupe">Coupe</a></li>
        <li><a href="#" data-value="car-estate">Estate</a></li>
      </ul>
    </li>
    <li>
      <a href="#" data-value="van">Van</a>
      <ul>
        <li><a href="#" data-value="van-basic">Basic</a></li>
        <li>
          <a href="#" data-value="van-luton">Luton</a>
          <ul>
            <li><a href="#" data-value="van-luton-low-loader">Low Loader</a></li>
            <li><a href="#" data-value="van-luton-tail-lift">Tail lift</a></li>
          </ul>
        </li>
        <li><a href="#" data-value="van-transit">Transit</a></li>
      </ul>
    </li>
  </ul>
  <input type="hidden" name="Vehicle" id="Vehicle" value="">
  <button type="submit">提交</button>
</form>

第二步：JavaScript处理选中逻辑 #

添加纯JS代码，监听所有选项的点击事件，把选中值写入隐藏输入框，同时给选中项加样式提示：

// 获取所有选项链接和隐藏输入框
const vehicleLinks = document.querySelectorAll('.vehicle-select a');
const vehicleInput = document.getElementById('Vehicle');

// 遍历绑定点击事件
vehicleLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    
    // 移除所有选项的选中样式
    vehicleLinks.forEach(item => item.classList.remove('selected'));
    // 给当前点击的选项添加选中样式
    this.classList.add('selected');
    
    // 将当前选项的data-value写入隐藏输入框
    vehicleInput.value = this.dataset.value;
  });
});

可选：添加CSS选中样式，让用户直观看到选中状态

.vehicle-select a.selected {
  color: #007bff;
  font-weight: bold;
}
/* 子菜单默认隐藏，hover时显示 */
.vehicle-select ul {
  display: none;
}
.vehicle-select li:hover > ul {
  display: block;
}

第三步：PHP接收POST值 #

在表单提交的目标页面（比如your-handler.php）中，直接获取$_POST['Vehicle']即可：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // 检查值是否存在
  if (isset($_POST['Vehicle'])) {
    $selectedVehicle = $_POST['Vehicle'];
    // 后续处理：存入数据库、验证等
    echo "选中的车辆类型：" . htmlspecialchars($selectedVehicle);
  } else {
    echo "请选择一个车辆类型";
  }
}
?>

补充说明 #

• 如果不需要自定义提交值，也可以直接用<a>的文本内容作为提交值，把this.dataset.value换成this.textContent.trim()即可，但data-value更灵活，能避免中文乱码或文本修改导致的提交值变化问题。
• 子菜单的展开逻辑可按需调整，比如点击父级展开而非hover，只需修改CSS和JS的事件监听即可。

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