为什么select下拉列表选中选项后页面重新加载无法正常显示选中值？

问题根因 #

• HTML中的selected是布尔属性，只要标签上存在该属性，无论值是什么都会被识别为选中状态。你给循环生成的每个option都加了selected属性，浏览器会默认选中最后一个带该属性的选项，所以All选项永远不会生效。
• 原来的页面刷新后不保留选中值，是因为渲染option的时候没有判断当前请求的参数和option的值是否匹配，没有给匹配的option加selected属性。

方案1：服务端渲染时直接判断（推荐） #

直接在Razor代码里判断当前URL的参数值和option的value是否匹配，只有匹配的时候才输出selected属性，代码修改如下：

修改Trade Channel下拉框 #

<select name="TradeChannelCode" style="width:200px" id="selectedTradeChannel">
    <option value="" id="all" @(Request.Query["TradeChannelCode"] == "" ? "selected" : "")>All</option>
    @foreach (var trChannel in Model.FilterableTrChannels)
    {
        <option value="@trChannel.TrCode" @(Request.Query["TradeChannelCode"] == trChannel.TrCode ? "selected" : "")>@trChannel.TradeChanelDisplayText</option>
    }
</select>

修改Subtrade Channel下拉框 #

<select name="SubtradeChannelCode" style="width:200px" id="selectedSubtradeChannel">
    <option value="" @(Request.Query["SubtradeChannelCode"] == "" ? "selected" : "")>All</option>
    @foreach (var subtrChannel in Model.FilterableSubTrChannels)
    {
        <option value="@subtrChannel.SubTrCode" @(Request.Query["SubtradeChannelCode"] == subtrChannel.SubTrCode ? "selected" : "")>@subtrChannel.SubtradeChanelDisplayText</option>
    }
</select>

该方案无需修改前端JS，页面直接渲染正确的选中状态，性能最优。

方案2：前端JS读取参数设置 #

如果不想修改服务端Razor代码，可以在页面加载完成后读取URL参数给下拉框赋值，修改原有JS代码即可：

$(document).ready(function () {
    // 页面加载时先设置选中值
    function getQueryParam(name) {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(name) || '';
    }
    $('#selectedTradeChannel').val(getQueryParam('TradeChannelCode'));
    $('#selectedSubtradeChannel').val(getQueryParam('SubtradeChannelCode'));

    // 原有change事件保留
    $("#filters select").change(function () {
        load();
    });
});

function load() {
    var url = window.location.href.split('?')[0];
    url = url + '?TradeChannelCode=' + $("#selectedTradeChannel").val() + '&SubtradeChannelCode=' + $("#selectedSubtradeChannel").val();
    window.location.href = url;
}

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