本文介绍如何利用浏览器 url 中的 `#hash` 值，动态匹配并自动选中 html 下拉框（`
在实际前端开发中，常需根据用户从上一页传入的导航标识（如 #sprites、#models）来初始化当前页的 UI 状态。你提供的场景正是典型用例：点击带锚点的链接（如 ./page1.html#textures）后，在 page1.html 中自动将下拉菜单定位到“Textures”选项。
实现原理非常简洁：
- 读取当前页面 URL 的哈希值（location.hash），例如 #textures；
- 去除开头的 #，得到键名 textures；
- 通过 document.querySelector('option[id="textures"]') 精准定位目标
- 设置其 selected 属性为 true，完成自动选中。
以下是推荐的完整脚本（建议置于 page1.html 底部或 DOMContentLoaded 事件中）：
<script>
document.addEventListener('DOMContentLoaded', function() {
const hash = location.hash.substr(1); // 获取去掉 '#' 的 hash 值
if (hash) {
const targetOption = document.querySelector(`option[id="${hash}"]`);
if (targetOption) {
targetOption.selected = true; // 推荐使用 .selected 属性（更语义化且兼容性更好）
// 触发 onchange 事件（如需同步执行 changeResource()）
const selectBox = document.getElementById('selectBox');
if (selectBox) selectBox.dispatchEvent(new Event('change', { bubbles: true }));
}
}
});
</script>✅ 注意事项与最佳实践：
- 使用 element.selected = true 替代 setAttribute('selected', true) 更可靠——后者仅设置初始属性，而 .selected 是反映当前选中状态的属性（property），能确保 DOM 行为与视觉一致；
- 务必检查 hash 是否存在及 targetOption 是否匹配成功，避免空引用错误；
- 若需触发 onchange 回调（如你的 changeResource() 函数），需手动派发 change 事件（如上例所示）；
- id 值应保证唯一且合法（避免空格、特殊符号），与链接中的 # 后内容严格一致；
- 不依赖 jQuery，纯原生 JavaScript 实现，轻量且兼容主流浏览器。
通过该方案，用户点击不同资源图标后，不仅能跳转至 page1.html，还能立即看到下拉菜单高亮对应分类，显著提升交互一致性与用户体验。
