HTML双列表框拖拽选择值无需高亮如何提交到PHP并输出？

解决方案 #

前端修改（DatabaseSearch.html文件） #

问题的核心逻辑是浏览器默认仅会提交多选下拉框中被手动高亮选中的选项，拖拽添加到已选列表的选项未被标记为选中状态，因此后端无法正常获取。你只需要在表单提交前自动全选已选列表内的所有选项即可，操作步骤如下：

1. 确认页面已经引入jQuery环境（你有相关开发需求大概率已经引入，若未引入可使用你本地存储的jQuery文件引入即可）
2. 在页面</body>结束标签前添加如下代码：

<script>
// 绑定表单提交事件
$('form').on('submit', function() {
  // 自动将已选县列表内的所有选项设置为选中状态
  $('#select_counties option').prop('selected', true);
});
</script>

这段代码会在用户点击提交按钮的瞬间自动完成已选列表选项的全选操作，表单提交时所有已拖拽到列表内的县值都会正常传递到后端，无需用户手动高亮选择。

后端验证（SearchTest.php文件） #

后端可直接通过$_POST['selectCounties']获取所有已选的县值，测试输出参考代码如下：

<?php
if (isset($_POST['selectCounties']) && !empty($_POST['selectCounties'])) {
    $selected_counties = $_POST['selectCounties'];
    echo "已选择的县：<br>";
    foreach ($selected_counties as $county) {
        echo htmlspecialchars($county) . "<br>";
    }
} else {
    echo "未选择任何县";
}
?>

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