// 1. 获取当前页面的完整URL字符串
let url_string = window.location.href;

// 2. 创建一个URL对象
let url = new URL(url_string);

// 3. 使用URLSearchParams对象获取特定参数的值
// 例如，如果当前URL是 http://example.com/page.html?name=Sport
let paramValue = url.searchParams.get("name");

console.log(paramValue); // 如果URL中包含 ?name=Sport，则输出: Sport

立即学习“Java免费学习笔记（深入）”；

以下是一个完整的示例，展示了如何将URL参数值应用于下拉菜单：

网易人工智能

网易数帆多媒体智能生产力平台

下载

HTML 结构与 JavaScript 代码示例：

    
    
    


    
选择你喜欢的运动
    
尝试访问类似这样的URL：

       http://localhost:8080/your_page.html?name=Sport

       或 http://localhost:8080/your_page.html?name=Football
    
    
        -- 请选择一项 --
        足球
        篮球
        运动 (通用)
        网球
        游泳
    

    

工作原理详解：

1. document.addEventListener('DOMContentLoaded', ...): 这是最佳实践。它确保了JavaScript代码在整个HTML文档加载并解析完毕后执行，从而避免了在DOM元素还未创建时尝试操作它们而引发错误。
2. document.getElementById("sportSelect"): 通过其在HTML中定义的id属性，准确地获取到目标元素。请确保你的HTML中标签的id与JavaScript代码中使用的ID完全一致。
3. selectElement.value = sportName;: 这是实现预设的核心步骤。当我们将下拉菜单的value属性设置为某个字符串时，浏览器会自动查找该下拉菜单下所有子元素中，其value属性与该字符串匹配的项，并将其设置为选中状态。例如，如果sportName的值为"Sport"，那么value="Sport"的选项就会被选中。
4. 健壮性检查: 代码中加入了if (sportName)判断，确保只有当URL参数存在且有值时才尝试设置下拉菜单。此外，if (selectElement.value !== sportName)是一个有用的检查，可以判断传入的参数值是否成功匹配到下拉菜单中的某个选项。

三、注意事项与扩展

在实际应用中，为了确保代码的健壮性、用户体验和安全性，有几个关键点需要注意：

1. 确保元素的ID正确: JavaScript代码中document.getElementById()方法中使用的ID字符串，必须与HTML中标签的id属性值完全匹配，区分大小写。
2. 处理参数不存在或值不匹配的情况:
   • 如果URL中没有对应的查询参数（例如?name=Sport中的name），或者参数值与任何的value属性都不匹配，那么selectElement.value = paramValue;这行代码将不会改变下拉菜单的当前选中状态。通常，它会保持为页面加载时的默认选中项（通常是第一个选项或通过selected属性预设的选项）。
   • 为了提供更好的用户体验，你可以在paramValue未找到或不匹配时，设置一个默认选项，例如将下拉菜单重置为“请选择”或一个通用的默认值。
3. URL编码与解码: 如果URL参数值可能包含特殊字符（如空格、&、=等），它们在URL中通常会被进行URL编码（例如空格变为%20）。URLSearchParams.get()方法会自动处理解码，因此你通常不需要手动调用decodeURIComponent()。但在手动构建URL时，请务必使用encodeURIComponent()对参数值进行编码。
4. 脚本执行时机: 将JavaScript代码放置在DOMContentLoaded事件监听器中，或将