HTML模板选择页用原生<select>绑定模板ID，通过value或data-template-id存储唯一标识，change事件监听切换并校验加载，避免XSS与错位渲染。
HTML 文档模板选择页面不需要框架也能做，关键在于用原生 <select> + data- 属性驱动模板切换，而不是靠 JS 拼 HTML 字符串。
怎么用 <select> 绑定模板 ID
用户选中模板时，要能立刻对应到一个唯一标识（比如 template-a、template-blog），后续加载或渲染才不混乱。直接把 ID 存在 value 或 data-template-id 里最稳妥：
<select id="template-selector"> <option value="default">默认文档</option> <option value="report" data-template-id="report-v2">正式报告</option> <option value="notes" data-template-id="notes-minimal">会议纪要</option> </select>
注意：别用中文或空格作 value，容易在 JS 中出错；data-template-id 可以更语义化，和后端约定好即可。
切换时怎么安全加载模板内容
模板内容通常来自 JSON 配置或内联 <script type="text/template">，不建议用 innerHTML += 拼接，易 XSS。推荐方式：
立即学习“前端免费学习笔记（深入）”；
- 提前把所有模板存进 JS 对象，用
value查表渲染：templates[select.value] - 若模板较大，用
fetch()加载单独的.html片段，但必须校验响应类型为text/html，且只插入到白名单容器内（如document.getElementById('editor')） - 避免用
eval()或new Function()执行模板里的 JS —— 用户可编辑模板时，这等于开放执行入口
为什么 change 事件比 click 更可靠
用户可能用键盘操作下拉框（Tab + 方向键），click 会漏掉这类交互。change 是标准语义，只要选项真正变更就触发：
document.getElementById('template-selector').addEventListener('change', function(e) {
const templateId = e.target.selectedOptions[0].dataset.templateId || e.target.value;
loadTemplate(templateId); // 实际加载逻辑
});
另外，别在 change 里直接调用耗时操作（如未加防抖的远程请求），用户快速切换时容易触发多次冗余请求。
移动端下拉菜单展开后点不到选项？
常见于 iOS Safari 或某些安卓 WebView，本质是 <select> 原生控件被系统接管，JS 无法监听中间状态。解决思路很实际：
- 放弃监听“展开中”状态，只信任
change的最终结果 - 如果必须做展开反馈（比如显示加载动画），改用自定义下拉（
<div role="combobox">），但代价是失去原生无障碍支持和系统级优化 - 测试时务必真机验证，模拟器常掩盖这个行为差异
模板选择本身是个低频动作，优先保证 change 后的结果正确，比追求过程动效更重要。真正容易被忽略的是：模板数据结构是否和表单字段严格对齐——选了「合同模板」却填着「简历字段」，这种错位不会报错，但导出时全乱。
