提交表单后如何让下拉列表保持选中的选项状态？

问题出在表单提交后页面刷新，下拉列表会重置为默认的第一个选项。要让它保持选中的选项，需要根据提交的参数来设置选中状态，下面分两种场景给出方案：

纯前端实现（GET提交场景） #

你的下拉框通过onchange提交表单，默认是GET请求，提交后URL会带上SelectOption=选中值的参数，我们可以在页面加载时读取这个参数，自动选中对应的选项：

1. 修正HTML的小问题 #

给第一个选项添加空值，同时统一label和select的ID大小写（否则点击label无法聚焦到下拉框）：

<form id="myform">
    <label for="SelectOption">Birimler</label>
    <select id="SelectOption" name="SelectOption" onchange="$('#myform').submit();">
        <option value="">Seçiniz</option>
        <option id="aYo" value="Yonetim">Yönetim</option>
        <option id="aAr" value="Arge">ARGE</option>
        <option id="aDe" value="Depo">Depo/Sevkiyat</option>
        <option id="aIK" value="IKID">İnsan Kaynakları/İdari İşler</option>        
    </select>
</form>

2. 添加前端JS代码 #

在页面底部添加以下脚本，页面加载时自动恢复选中状态：

document.addEventListener('DOMContentLoaded', function() {
    // 解析URL中的查询参数
    const urlParams = new URLSearchParams(window.location.search);
    const selectedVal = urlParams.get('SelectOption');
    
    // 如果存在选中参数，设置下拉框对应值
    if (selectedVal) {
        document.getElementById('SelectOption').value = selectedVal;
    }
});

后端渲染实现（推荐，更稳定） #

如果你的页面是后端动态渲染的（比如PHP、Python、Java等），可以在后端获取提交的SelectOption参数，然后在对应的<option>标签上添加selected属性：

以PHP为例：

<form id="myform">
    <label for="SelectOption">Birimler</label>
    <select id="SelectOption" name="SelectOption" onchange="$('#myform').submit();">
        <option value="" <?php echo isset($_GET['SelectOption']) && $_GET['SelectOption'] == '' ? 'selected' : ''; ?>>Seçiniz</option>
        <option id="aYo" value="Yonetim" <?php echo isset($_GET['SelectOption']) && $_GET['SelectOption'] == 'Yonetim' ? 'selected' : ''; ?>>Yönetim</option>
        <option id="aAr" value="Arge" <?php echo isset($_GET['SelectOption']) && $_GET['SelectOption'] == 'Arge' ? 'selected' : ''; ?>>ARGE</option>
        <option id="aDe" value="Depo" <?php echo isset($_GET['SelectOption']) && $_GET['SelectOption'] == 'Depo' ? 'selected' : ''; ?>>Depo/Sevkiyat</option>
        <option id="aIK" value="IKID" <?php echo isset($_GET['SelectOption']) && $_GET['SelectOption'] == 'IKID' ? 'selected' : ''; ?>>İnsan Kaynakları/İdari İşler</option>        
    </select>
</form>

这样页面渲染时就会直接把选中的选项标记为默认选中，无需前端额外处理。

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