如何通过URL参数选中页面<select>下拉框的指定选项

完全可以通过URL传参实现页面加载时自动选中下拉框对应选项，没有技术障碍，根据页面技术栈选择后端处理或者前端处理的方案即可。

方案1：后端直接处理（适配你用的aspx场景） #

你给出的示例URL为smaple.aspx?dropDown=OptionB，属于ASP.NET WebForm场景，页面请求到达后端时，直接从QueryString中读取参数，给下拉框赋值选中即可，核心逻辑：

• 页面加载生命周期内，先判断URL中是否存在dropDown参数
• 校验参数值是否在下拉框合法选项范围内（即你提到的OptionA/OptionB/OptionC三个值）
• 匹配到合法值后，将下拉框的选中值设置为该参数值
  示例后端C#代码：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) // 仅首次页面加载时处理，避免表单回发覆盖用户手动选择
    {
        string targetOption = Request.QueryString["dropDown"];
        string[] validOptions = {"OptionA", "OptionB", "OptionC"};
        if (validOptions.Contains(targetOption))
        {
            dropDown.SelectedValue = targetOption;
        }
    }
}

注意：只有<select>标签添加了runat="server"属性时，后端才能直接通过控件name访问到，纯原生前端标签请使用下面的前端方案。

方案2：前端JS处理（适配静态页/前后端分离场景） #

不需要后端介入，页面在浏览器端加载完成后，用JS解析URL查询参数，操作DOM设置下拉框选中状态即可，核心逻辑：

• 页面DOM加载完成后，解析当前URL的search部分，拿到dropDown对应的参数值
• 查找name属性为dropDown的select元素
• 校验参数合法性后，设置select的value为参数值，浏览器会自动选中匹配的option
  示例原生JS代码：

document.addEventListener('DOMContentLoaded', function() {
    // 解析URL查询参数
    const urlParams = new URLSearchParams(window.location.search);
    const targetOption = urlParams.get('dropDown');
    const validOptions = ["OptionA", "OptionB", "OptionC"];
    // 定位目标下拉框
    const selectEl = document.querySelector('select[name="dropDown"]');
    if (selectEl && targetOption && validOptions.includes(targetOption)) {
        selectEl.value = targetOption;
    }
})

注意事项 #

• 传参的值需要和下拉框对应option的value属性完全一致，大小写、空格都要匹配，否则会选中失败
• 必须添加合法值校验，避免URL传入不存在的选项值导致页面逻辑异常
• 如果页面本身配置了默认选中逻辑，要把URL传参的判断优先级放在默认选中逻辑前面，否则设置会被默认值覆盖

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