PHP实现点击搜索后保留下拉选择框选中值的方法

方法一：PHP传递选中值给JS，生成选项时标记选中 #

表单提交后，PHP可以获取到选中的年份值，将这个值传递给JS，在生成选项时判断当前年份是否为提交的选中值，给对应选项添加selected属性即可。

代码示例：

<select name="yearsFrom" id="selesctDatesOne"></select>
<script>
// 从PHP获取提交后的选中年份，无提交值时为null
var selectedYear = <?php echo isset($_GET['yearsFrom']) ? intval($_GET['yearsFrom']) : 'null'; ?>;

var minA = new Date().getFullYear(),
    maxA = 1900,
    selectA = document.getElementById('selesctDatesOne');

for (var i = maxA; i <= minA; i++){
    var optA = document.createElement('option');
    optA.value = i;
    optA.innerHTML = i;
    // 匹配选中值则设置选中状态
    if (selectedYear !== null && i === selectedYear) {
        optA.selected = true;
    }
    selectA.appendChild(optA);
}
</script>

若表单为POST提交，只需将$_GET['yearsFrom']替换为$_POST['yearsFrom']。

方法二：JS直接从URL参数读取选中值（适用于GET提交） #

如果是GET方式提交，URL中会携带yearsFrom=xxx参数，可直接用URLSearchParams在前端读取并设置选中状态，无需后端修改：

<select name="yearsFrom" id="selesctDatesOne"></select>
<script>
var minA = new Date().getFullYear(),
    maxA = 1900,
    selectA = document.getElementById('selesctDatesOne');

// 生成年份选项
for (var i = maxA; i <= minA; i++){
    var optA = document.createElement('option');
    optA.value = i;
    optA.innerHTML = i;
    selectA.appendChild(optA);
}

// 从URL参数获取并设置选中值
const params = new URLSearchParams(window.location.search);
const selectedYear = params.get('yearsFrom');
if (selectedYear) {
    selectA.value = selectedYear;
}
</script>

方法三：通过隐藏域传递选中值（适用于POST提交） #

POST提交时参数不会出现在URL中，可在表单内添加隐藏域，用PHP写入提交后的年份值，再通过JS读取隐藏域设置选中：

<form method="post">
    <select name="yearsFrom" id="selesctDatesOne"></select>
    <!-- 隐藏域存储提交后的选中年份 -->
    <input type="hidden" id="hiddenSelectedYear" value="<?php echo isset($_POST['yearsFrom']) ? intval($_POST['yearsFrom']) : ''; ?>">
    <button type="submit">搜索</button>
</form>
<script>
var minA = new Date().getFullYear(),
    maxA = 1900,
    selectA = document.getElementById('selesctDatesOne');

// 生成年份选项
for (var i = maxA; i <= minA; i++){
    var optA = document.createElement('option');
    optA.value = i;
    optA.innerHTML = i;
    selectA.appendChild(optA);
}

// 读取隐藏域并设置选中
var selectedYear = document.getElementById('hiddenSelectedYear').value;
if (selectedYear) {
    selectA.value = selectedYear;
}
</script>

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