如何使用jQuery复制、爬取或导出网页下拉菜单dropdown的选项数据？

操作前请先打开目标网页的开发者工具控制台（快捷键通常为F12/Ctrl+Shift+I/Cmd+Opt+I，切换到「Console」标签页），再执行以下代码即可，前提是目标网页已经加载了jQuery依赖。

1. 基础：获取下拉菜单所有选项数据 #

首先需要确定目标下拉菜单的选择器，你可以右键点击页面上的下拉菜单，选择「检查」，在元素面板右键对应<select>标签，复制选择器替换下方代码中的#targetDropdown即可。

// 遍历下拉菜单所有option，获取value和显示文本
const dropdownOptions = $('#targetDropdown option').map(function() {
  return {
    value: $(this).val(), // 选项绑定的value值
    text: $(this).text().trim() // 选项在页面上显示的文本内容
  };
}).get();

执行完成后dropdownOptions就是包含所有下拉选项的数组，你可以根据需要选择不同的导出方式。

2. 不同导出场景的实现代码 #

• 导出为JSON格式 #

const jsonResult = JSON.stringify(dropdownOptions, null, 2);
// 直接在控制台打印结果，可手动复制
console.log(jsonResult);

• 导出为纯文本格式（每行一个选项） #

const textResult = dropdownOptions.map(item => `显示文本：${item.text}，值：${item.value}`).join('\n');
console.log(textResult);

• 一键复制到系统剪贴板 #

// 可替换为上面的jsonResult或自定义内容
const copyContent = textResult;
navigator.clipboard.writeText(copyContent).then(() => {
  alert('下拉菜单数据已成功复制到剪贴板');
}).catch(err => {
  console.error('复制失败，错误信息：', err);
  // 复制失败时可以直接从控制台输出的内容手动复制
  console.log('待复制内容：', copyContent);
});

• 导出为本地文件 #

// 示例导出为JSON文件，导出为TXT只需修改type和后缀名即可
const blob = new Blob([jsonResult], { type: 'application/json' });
const downloadUrl = URL.createObjectURL(blob);
const downloadLink = document.createElement('a');
downloadLink.href = downloadUrl;
downloadLink.download = '下拉菜单数据.json';
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
URL.revokeObjectURL(downloadUrl);

3. 注意事项 #

• 如果目标下拉菜单是动态渲染的（比如联动下拉、懒加载渲染），需要等下拉菜单所有选项加载完成后再执行代码，否则会获取到不完整的数据
• 部分浏览器的剪贴板API仅支持HTTPS站点调用，如果是HTTP站点，直接复制控制台输出的内容即可
• 如果目标页面没有加载jQuery，可在控制台执行代码临时注入jQuery后再操作，也可以直接将上述逻辑替换为原生JS实现，逻辑完全一致。

内容的提问来源于stack exchange，提问作者Alexandru Trandafir Catalin