本文介绍如何利用浏览器 url 中的哈希（`#` 后的内容）动态匹配并自动选中 html 下拉框（`
在单页应用或静态站点中，常需通过不同入口链接（如 page1.html#sprites、page1.html#models）跳转到同一目标页，并期望页面自动定位并高亮/激活对应功能模块。一个典型需求是：当用户点击带哈希的链接后，在 page1.html 中让
实现原理非常简洁：利用 location.hash 获取当前 URL 的哈希部分（如 #sprites），截取 # 后的字符串作为标识符，再通过 DOM 查询匹配 id 属性一致的
以下是推荐的完整实现代码（建议置于 page1.html 底部或 DOMContentLoaded 事件中）：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<script>
document.addEventListener('DOMContentLoaded', function() {
const hash = location.hash.substr(1); // 移除 '#'，获取 'sprites'、'models' 等
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>⚠️ 注意事项：
- ID 唯一性与安全性：确保所有
- 优先使用 .selected = true：相比 setAttribute('selected', true)，直接操作 .selected 属性更符合标准，且能正确触发原生表单行为和事件。
- 触发联动逻辑：若下拉框绑定有 onchange="changeResource();"，仅设 selected 不会自动触发该函数。因此建议显式派发 'change' 事件（如上例），确保业务逻辑（如资源加载、UI 更新）正常执行。
- 兼容性：该方案支持所有现代浏览器及 IE9+，无需额外依赖。
通过这一机制，你无需后端参与或复杂路由库，即可实现轻量、可靠、语义清晰的哈希驱动状态同步，显著提升静态站点的用户体验与可维护性。
