如何通过页面A提交按钮预设页面B下拉列表选中项？

要实现页面A提交后预设页面B下拉框的选中项，核心是让页面B获取到页面A提交的acces参数，并根据参数值设置对应选项的选中状态，分两种场景处理：

场景1：后端渲染页面B（如PHP、Python、Java等后端语言） #

页面A通过POST提交参数后，后端在渲染页面B时，读取acces参数值，给匹配的<option>标签添加selected属性。

以PHP为例，修改页面B的下拉框代码如下：

<select data-required_mark="required" data-field_type="select" data-original_id="liste">
    <option value="">liste</option>
    <option value="choix 1" <?php echo isset($_POST['acces']) && $_POST['acces'] === 'choix 1' ? 'selected' : ''; ?>>je veux le 1</option>
    <option value="choix 2" <?php echo isset($_POST['acces']) && $_POST['acces'] === 'choix 2' ? 'selected' : ''; ?>>je veux le 2</option>
    <option value="choix 3" <?php echo isset($_POST['acces']) && $_POST['acces'] === 'choix 3' ? 'selected' : ''; ?>>je veux le 3</option>
</select>

其他后端语言逻辑一致：先接收POST请求中的acces参数，再在对应选项上标记选中状态。

场景2：纯前端处理（页面B为静态页面） #

静态页面无法直接读取POST请求参数，需先修改页面A的提交方式为GET，让参数携带在URL中，再通过JavaScript读取参数并设置选中。

第一步：修改页面A的表单 #

<form action="/form-test-pour-repo/" method="get">
    <button type="submit" name="acces" value="choix 3">Choisir le 3</button>
</form>

第二步：在页面B中添加JavaScript代码 #

将以下代码放在页面B的<script>标签中（建议放在</body>前）：

// 从URL中获取指定参数
function getUrlParam(paramName) {
    const params = new URLSearchParams(window.location.search);
    return params.get(paramName);
}

// 页面加载完成后设置下拉框选中
window.addEventListener('DOMContentLoaded', () => {
    const targetValue = getUrlParam('acces');
    if (targetValue) {
        const selectBox = document.querySelector('select[data-original_id="liste"]');
        if (selectBox) {
            selectBox.value = targetValue;
        }
    }
});

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