最稳妥方式是复制 select 元素的外层 html；若选项为 js 动态生成，需先展开或执行脚本提取 innerhtml；可过滤 disabled option；支持一键导出为 html 文件；注意识别伪下拉框（div 模拟）。
直接保存 select 元素的完整 HTML 代码（含所有 option）
如果你只是想把网页中某个 select 下拉框连同它的全部选项一起“拷贝出来”，最稳妥的方式是定位到该元素，再提取其外层 HTML 字符串。浏览器开发者工具里右键「复制」→「复制外层 HTML」即可，但要注意：这个操作依赖你是否已手动展开过下拉框（有些网站用 JS 动态渲染 option，未展开时 DOM 中可能为空）。
实操建议：
- 打开开发者工具（
F12或右键 → 检查），用元素选择器（Ctrl+Shift+C）点中下拉框，确认select标签下确实存在option子节点 - 若没看到
option，说明是 JS 动态加载——得等它渲染完成再复制，或改用脚本提取 - 右键
select节点 → 「复制」→ 「复制外层 HTML」，粘贴结果就是你要的完整源码片段
用 JavaScript 批量提取页面所有 select 的 HTML（含动态生成的）
当页面有多个下拉框、或选项由 AJAX/React/Vue 等框架异步填充时，手动复制容易漏。此时运行一段脚本最可靠，它能确保取到当前真实 DOM 状态。
在控制台（Console）中执行以下代码：
Array.from(document.querySelectorAll('select')).map(sel =>
`<select name="${sel.name || ''}" id="${sel.id || ''}">${sel.innerHTML}</select>`
).join('\n\n');
说明：
-
sel.innerHTML取的是当前实际渲染出的所有option（包括 JS 后续插入的） -
name和id属性被保留，方便后续识别来源 - 如果某
select是空的（比如还没触发加载），对应结果也会是空<select></select>，可据此排查加载异常
保存时忽略 disabled / hidden 的 option？按需过滤
有些下拉框会混入禁用项（<option disabled></option>）或隐藏项（style="display:none"），而你只想存“可用选项”。这时不能只靠 innerHTML，得主动遍历并筛选。
替换上面脚本中的 sel.innerHTML 部分为：
Array.from(sel.querySelectorAll('option:not([disabled])')).map(opt =>
opt.outerHTML
).join('')
注意点：
-
option[disabled]能匹配disabled属性存在的项，但不匹配disabled=""以外的值（HTML 规范中只要存在该属性即禁用） - 如果禁用逻辑是通过 class 或 JS 控制显隐，得额外加判断，比如
:not(.hidden):not([style*="display:none"]) - 不要用
opt.textContent替代opt.outerHTML——你会丢失value、selected等关键属性
导出为文件？一行命令解决（Chrome/Firefox 控制台）
复制完 HTML 片段后，别再手动建文件粘贴。直接在控制台执行下载命令，自动生成 selects.html 文件：
const html = `${yourSelectHtmlString}`;
const blob = new Blob([html], {type: 'text/html'});
const url = URL.createObjectURL(blob);
Object.assign(document.createElement('a'), {
href: url,
download: 'selects.html'
}).click();
URL.revokeObjectURL(url);
使用前提：
- 把上面
yourSelectHtmlString替换为你前面生成的字符串（比如从Array.from(...).map(...).join()得到的结果） - 这段代码必须在用户手势触发上下文（如控制台）中运行，否则部分浏览器会拦截
click() - 导出的是纯 HTML，不含 CSS/JS，如需样式还原，得额外提取
select的 class 或内联 style
真正容易被忽略的是：很多网站的 select 实际是用 div + ul 模拟的（比如 Ant Design、Element UI），它们根本不是原生 select 元素。遇到这种情况，上述所有方法都会失效——得先确认目标是不是真 select，再决定是抓 DOM 还是分析网络请求返回的选项数据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
