基于下拉菜单与URL哈希值切换Div的实现问题

第一步：修正原代码的语法问题 #

你原有的JS代码存在大括号嵌套错误、事件监听未闭合的问题，先把这部分修复，否则逻辑会出现异常。

第二步：封装通用切换函数 #

把图层切换的逻辑抽成独立函数，不管是下拉菜单触发还是URL哈希触发，都能复用这套逻辑，避免重复编写判断代码。

第三步：解析URL哈希并自动触发切换 #

页面加载时读取URL的哈希值，提取其中的dayX标识，调用切换函数显示对应的Div，同时同步下拉菜单的选中状态；另外监听哈希变化事件，用户手动修改URL哈希时也能自动切换。

完整代码示例 #

<form name="AdditionalLayer" class="form" id="selectLayers">
    <select size="1" id="layerSelect">
        <option value="">Layer:</option>
        <option value="">-----------------------</option> 
        <option value="day1">Day 1</option>
        <option value="day2">Day 2</option>
        <option value="day3">Day 3</option>
    </select>
</form>

<div id="legend_day1">day 1 Legend</div>
<div id="legend_day2" style="display: none;">day 2 Legend</div>
<div id="legend_day3" style="display: none;">day 3 Legend</div>

<script>
// 封装切换图层的通用函数
function switchLayer(targetDay) {
    // 先隐藏所有图层
    document.getElementById("legend_day1").style.display = 'none';
    document.getElementById("legend_day2").style.display = 'none';
    document.getElementById("legend_day3").style.display = 'none';

    // 若目标day有效，显示对应图层并同步下拉菜单
    if (targetDay) {
        const targetElement = document.getElementById(`legend_${targetDay}`);
        if (targetElement) {
            targetElement.style.display = 'block';
            document.getElementById("layerSelect").value = targetDay;
        }
    }
}

// 监听下拉菜单切换事件
document.getElementById("selectLayers").addEventListener('change', function(event) {
    switchLayer(event.target.value);
});

// 解析哈希值并触发切换的函数
function handleHashChange() {
    // 拆分哈希值，比如#4/38.00/-97.03/day3，取最后一段作为目标day
    const hashParts = window.location.hash.slice(1).split('/');
    const targetDay = hashParts[hashParts.length - 1];
    // 验证是否为合法的day值
    if (['day1', 'day2', 'day3'].includes(targetDay)) {
        switchLayer(targetDay);
    }
}

// 页面加载时执行一次哈希解析
window.addEventListener('load', handleHashChange);
// 监听哈希变化，用户手动修改URL时自动切换
window.addEventListener('hashchange', handleHashChange);
</script>

代码说明 #

• switchLayer函数：统一处理图层的显示/隐藏逻辑，同时同步下拉菜单选中状态，避免界面状态不一致。
• handleHashChange函数：将哈希值按/分割后提取最后一段，验证合法性后调用切换函数。
• 同时监听load和hashchange事件，覆盖页面初始加载和用户手动修改URL哈希两种场景。

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