HTML页面加载时自动选中对应页面的<select>选项实现方法

首先修正你代码里的变量名不一致问题：你定义了const selPage = document.getElementById("select_page");，但事件监听用的是sayfaSecim，这会导致报错，先统一变量名。

接下来实现页面加载时自动匹配当前页面的逻辑：

1. 获取当前页面的文件名（从window.location.pathname中提取）
2. 将<select>的value设置为这个文件名，即可自动选中对应选项

完整代码如下：

HTML部分 #

<select id="select_page">
    <option value="Page1.html">Page 1</option>
    <option value="Page2.html">Page 2</option>
    <option value="Page3.html">Page 3</option>
    <option value="Page4.html">Page 4</option>
</select>

JavaScript部分 #

// 统一变量名
const selPage = document.getElementById("select_page");

// 页面DOM加载完成后执行匹配逻辑
document.addEventListener('DOMContentLoaded', () => {
    // 提取当前页面的文件名
    const currentPage = window.location.pathname.split('/').pop();
    // 设置select选中当前页面对应的选项
    selPage.value = currentPage;
});

// 跳转逻辑
selPage.addEventListener("change", () => {
    const selectedValue = selPage.value;
    window.location.href = selectedValue;
});

关键说明： #

• window.location.pathname.split('/').pop()：把当前页面的路径按/分割，取最后一段就是目标文件名（比如http://xxx.com/Page2.html会得到Page2.html）
• DOMContentLoaded事件确保DOM加载完成后再操作<select>，避免出现找不到元素的问题

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