Javascript 如何从选择的optgroup和options中获取数组？

假设我想要一个具有此格式的对象

    var optgroups = [
    {
      name: "Cat1",
      options: [
        { text: "item1", value: "1" },
        { text: "item4", value: "4" },
      ],
    },
    { name: "Cat2", options: [{ text: "item2", value: "2" }] },
    { name: "Cat3", options: [{ text: "item3", value: "3" }] },
    ];

我想根据表单中select元素中已经填充的内容来创建它

<select>
   <optgroup label="Cat1">
      <option value="1">item1</option>
      <option value="4">item4</option>
   </optgroup>
   <optgroup label="Cat2">
      <option value="2">item2</option>
   </optgroup>
   <optgroup label="Cat3">
      <option value="3">item3</option>
   </optgroup>
 </select>

项目1
项目4
项目2
项目3

什么JavaScript代码（jQuery也是一个选项）可以实现这样一个对象

---

这是一个旧的代码库，因此React/Vue之类的东西不是一个选项。

您可以使用

document.querySelectorAll

让所有

元素循环并再次使用它来查找所有选项

const optgroups=[]；
document.querySelectorAll（“mySelect>optgroup”）.forEach（group=>{
const obj={name:group.label，选项：[]}；
group.querySelectorAll（'option'）.forEach（option=>{
obj.options.push（{text:option.textContent，value:option.value}）；
});
optgroups.push（obj）；
});
console.log（optgroups）

项目1
项目4
项目2
项目3
这是我最后使用的东西，多亏了

只需循环浏览HTML元素。熟悉、使用可用的和方法。
  const optgroups = [
    ...document.querySelectorAll("#mySelect > optgroup"),
  ].map((group) => ({
    name: group.label,
    options: [...group.querySelectorAll("option")].map((opt) => ({
      text: opt.textContent,
      value: opt.value,
    })),
  }));