表单重新提交时如何让已勾选的动态生成div保留在选中位置？

实现方案 #

1. 页面顶部开启Session #

所有需要用到选中状态的PHP页面最顶部都要添加以下代码，注意不能有任何输出（包括空格、换行）在这行代码之前：

<?php
session_start();
// 初始化选中学生ID数组，不存在就新建
if (!isset($_SESSION['selected_students'])) {
    $_SESSION['selected_students'] = [];
}
?>

2. 表单新增隐藏域存选中ID #

在现有form标签内加一个隐藏输入框，用来提交当前选中的所有学生ID：

<form action = "" method = "POST">
    <!-- 新增隐藏域 -->
    <input type="hidden" name="selected_ids" id="selected_ids" value="">
    <div class = "searchcontainer">
        <input id = "search" type="search" name = "search" class = "textbox" placeholder 
        = "Type the students name and press Enter to search...">
        <input type = "submit" style="display:none" id = "submitsearch"/>
    </div>
</form>

3. 修改JS代码同步选中状态 #

每次勾选/取消勾选、提交表单时，都把当前选中的ID更新到隐藏域：

const main = document.querySelector(".tablecontainer");
const selected = document.querySelector(".selected");
const selectedIdsInput = document.getElementById("selected_ids");

// 新增：更新选中ID到隐藏域的公共方法
function updateSelectedIds() {
    const selectedRows = selected.querySelectorAll(".rowcontainer");
    // 提取所有选中行的学生ID，去掉前缀r
    const ids = Array.from(selectedRows).map(row => row.id.replace('r', ''));
    selectedIdsInput.value = ids.join(',');
}

main.addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.classList.contains("move")) {
        const rowContainer = tgt.closest(".rowcontainer");
        if (tgt.checked) {
            selected.append(rowContainer);
        }
        updateSelectedIds(); // 勾选后同步状态
    }
})
selected.addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.classList.contains("move")) {
        const rowContainer = tgt.closest(".rowcontainer");
        main.append(rowContainer)
        updateSelectedIds(); // 取消后同步状态
    }
})

// 表单提交前先同步一次选中状态
document.querySelector('form').addEventListener('submit', updateSelectedIds);

4. PHP端更新Session并渲染对应行 #

表单提交后先更新Session里的选中ID，渲染行的时候判断应该放在搜索结果区还是选中区：

<?php
// 接收提交的选中ID，更新到Session
if (isset($_POST['selected_ids']) && trim($_POST['selected_ids']) !== '') {
    $_SESSION['selected_students'] = explode(',', $_POST['selected_ids']);
} else {
    $_SESSION['selected_students'] = [];
}

// 原有搜索逻辑
if(isset($_POST['search'])){
    $input = $_POST['search'];
    $result = $conn->query("select * from logins");
    // 遍历查询结果生成行，注意修改为你实际的学生ID字段名
    while($row = $result->fetch_assoc()){
        $studentid = $row['id'];
        $is_selected = in_array($studentid, $_SESSION['selected_students']);
?>
<script>
    let r<?php echo $studentid ?> = document.createElement("div");
    r<?php echo $studentid ?>.id = "r<?php echo $studentid ?>";
    r<?php echo $studentid ?>.className = "rowcontainer";
    // 给checkbox设置选中状态
    let checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.classList.add('move');
    checkbox.checked = <?php echo $is_selected ? 'true' : 'false'; ?>;
    r<?php echo $studentid ?>.appendChild(checkbox);
    // 其他行内容按你原有逻辑添加即可
    
    // 选中的行放到选中容器，否则放到搜索结果容器
    <?php if($is_selected){ ?>
        document.querySelector(".selected").appendChild(r<?php echo $studentid ?>);
    <?php }else{ ?>
        document.getElementById("tablecontainer").appendChild(r<?php echo $studentid ?>);
    <?php } ?>
</script>
<?php
    }
}
?>

5. 其他页面获取选中ID #

在需要用到选中数据的页面，开启Session后直接读取即可：

<?php
session_start();
$selected_student_ids = $_SESSION['selected_students'] ?? [];
// 可以用这些ID查询数据库或者做其他业务操作
?>

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