时间戳

首页 > 解决方案 > 如何从 querySelector 返回几个值？

javascript - 如何从 querySelector 返回几个值？

问题描述

我正在尝试使用查询选择器从下拉菜单中获取具有值和内部文本的对象：

<label>
  <span>Project :</span>
</label>
<select name="projectId">
  <option value="1">foo</option>
  <option value="2">bar</option>
</select>

我想要一个看起来像这样的对象：

{
    "1":"foo",
    "2":"bar"
}

这就是我来自的地方

let options = await page.evaluate(() => {
                return document.querySelector('select[name=projectId]').innerText;
            });

但我只得到一串内部文本我无法弄清楚如何实现我的目标，有人可以帮忙吗？

标签： javascript

解决方案

您可以使用document.querySelectorAll获取所有选项元素，展开语法将其转换为数组，Array#map提取每个选项的值和文本，并将Object.fromEntries其转换为单个对象。

const res = Object.fromEntries(
  [...document.querySelectorAll("select[name=projectId] > option")]
    .map(o => [o.value, o.text]));
console.log(res);
<label>
  <span>Project :</span>
</label>
<select name="projectId">
  <option value="1">foo</option>
  <option value="2">bar</option>
</select>

推荐阅读