获取选择组中的哪个子组件

Question

在JavaScript中（请，不是jQuery解决方案）是否可以选择选择组中的哪个子组件？我试着更好地解释一下。给出一个选择：

<select name="testSelect">
   <optgroup label="fruits">
      <option value="apples">Apples</option>
      <option value="oranges">Oranges</option>
      <option value="pears">Pears</option>
   </optgroup>
   <optgroup label="cars">
      <option value="ford">ford</option>
      <option value="toyota">toyota</option>
      <option value="ferrari">ferrari</option>
   </optgroup>
</select>

我知道我可以获得所选项目的索引，但这不是我想要的，因为我会得到0（苹果），1（橙子），2（梨子），3（福特），4（丰田），5（法拉利），虽然我想：

0: apples
1: oranges
2: pears

0: ford
1: toyota
2: ferrari

那么，有没有办法让索引从给定的optgroup开始？

（我的问题可能真的没有什么不同，但是当前HTML / JS世界中的4年就像是一个地质时期，所以我认为有一些我没有发现的新东西）