如何根据地址栏href锚点自动选中下拉菜单对应选项？

这个需求完全可以实现，只需要在page1.html中添加一段JavaScript代码，读取地址栏的锚点（hash）并对应设置下拉菜单的选中状态。

解决方案代码 #

在page1.html的</body>标签前添加以下代码，确保DOM加载完成后执行逻辑：

<div class="custom-select">
   <label class="resource">Resource:</label>
   <select id="selectBox" onchange="changeResource();">
      <option value="1" id="sprites">Sprites</option>
      <option value="2" id="models">Models</option>
      <option value="3" id="textures">Textures</option>
      <option value="4" id="sounds">Sounds</option>
  </select>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 获取地址栏锚点，去除开头的#符号
    const hash = window.location.hash.slice(1);
    const selectBox = document.getElementById('selectBox');
    
    if (hash) {
        // 根据锚点值找到对应id的option元素
        const targetOption = document.getElementById(hash);
        if (targetOption) {
            // 设置下拉菜单选中该选项
            selectBox.value = targetOption.value;
            // 若需要触发onchange事件的逻辑，取消下面的注释
            // changeResource();
        }
    } else {
        // 无锚点时默认选中第一个选项
        selectBox.value = '1';
    }
});

// 示例：你的changeResource函数（若未定义需补充）
function changeResource() {
    // 这里写切换资源的逻辑，比如加载对应内容
    console.log('当前选中资源:', selectBox.options[selectBox.selectedIndex].text);
}
</script>

代码逻辑说明 #

1. DOMContentLoaded事件：确保页面所有DOM元素加载完成后再执行代码，避免出现找不到元素的错误。
2. 读取锚点：通过window.location.hash获取地址栏中的锚点部分，用slice(1)去除开头的#得到纯锚点值（比如sprites）。
3. 匹配并选中选项：根据锚点值找到对应id的<option>元素，将下拉菜单的value设置为该选项的value，实现自动选中。
4. 触发change事件（可选）：因为通过JS直接设置value不会自动触发onchange事件，若需要执行changeResource()的逻辑，手动调用该函数即可。

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