javascript - 获取 optgroup 中选择选项的索引

Question

如果我有如下选项列表:

<select name="optionList" id="optionList"> 
    <optgroup label="optgroup1"> 
        <option value="1">1</option> 
        <option value="2">2</option> 
        <option value="3">3</option> 
        <option value="4">4</option> 
    </optgroup> 
    <optgroup label="optgroup2"> 
        <option value="5">5</option> 
        <option value="6">6</option> 
        <option value="7">7</option> 
        <option value="8">8</option> 
    </optgroup> 
</select>

我知道我可以使用以下方法访问 selectedIndex:

document.getElementById('optionList').selectedIndex;

如果我使用上面的方法，虽然选择的索引 5 将是 4，6 将是 5，7 将是 6，等等

我如何知道选项组中所选项目的位置？

总而言之，我希望能够查询一些东西并取回它在 optgroup 中的位置，这样 5 会返回 0，6 会返回 1 等等......

Answer 1

这是一个稍微复杂的任务，因为没有本地方法来完成它。我将根据当前的浏览器标准来回答:可以在较旧的浏览器中执行此操作，但工作量更大。

var select = document.getElementById('optionList'), // the <select> element
    selectedIndex = select.selectedIndex, // 0-based index of which element in the <select> is selected
    selectedElement = select.options[selectedIndex], // DOM element selected
    optGroup = selectedElement.parentNode, // <optgroup> element
    optGroupOptions = optGroup.children, // <option> elements in the <optgroup>
    positionInOptGroup = Array.prototype.indexOf.call(optGroupOptions, selectedElement); // the selected <option>'s position in the <optgroup>

(jsFiddle)

请注意，如果浏览器不支持 Element#children，这将不起作用。 (即 IE <9)。在测试时，您必须将 childNodes 集合过滤到一个数组中。同样，它需要 Array#indexOf，这在 IE <9 中也不存在。