如何使用querySelector获取下拉菜单option的value与innerText生成对应对象

直接修改page.evaluate内的逻辑，遍历所有option节点拼接为目标对象即可，两种写法可选：

写法1（推荐，简洁高效） #

let options = await page.evaluate(() => {
  const select = document.querySelector('select[name="projectId"]');
  return Object.fromEntries(
    Array.from(select.options).map(option => [option.value, option.innerText.trim()])
  );
});

写法2（兼容低版本环境） #

let options = await page.evaluate(() => {
  const select = document.querySelector('select[name="projectId"]');
  const res = {};
  for (const option of select.options) {
    res[option.value] = option.innerText.trim();
  }
  return res;
});

• 你之前的写法只读取了select元素的innerText，只会返回所有option文本拼接的纯字符串，没有单独提取每个option的属性
• select.options可以直接获取下拉框的所有option元素集合，不需要额外查询子节点
• 用Array.from将类数组格式的option集合转为普通数组，即可使用数组方法遍历处理
• trim()用于清除option文本前后可能存在的多余空白字符，不需要可以直接删除

内容的提问来源于stack exchange，提问作者lolozen