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中所选项目的位置？

总之，我希望能够查询某些内容并恢复其在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＆lt; 9。

中也不存在

Answer 2

使用纯javascript

var element = document.getElementById('optionList');
console.log(element.options[element.selectedIndex].parentNode.label);

Answer 3

jQuery crossbrowser解决方案：

$('#optionList option:selected').index();

preview

Answer 4

试试这个：

function indexOf(select) {
    var options = select.options;
    var selectedOption = options.item(select.selectedIndex);
    var nodes = selectedOption.parentNode.children;

    for (var i = 0; i < nodes.length; ++i) {
        if (nodes[i] === selectedOption) {
            return i;
        }
    }

    return -1;
}

indexOf(document.getElementById('optionList'));

工作样本：http://jsfiddle.net/49R7k/1/

Answer 5

我知道这是一个古老的问题，实现可能已更改，但是我发现选择器更改事件中的简单jQuery解决方案例如

$(document).on('change', ".cmilestoneTaskSelector", function(e) 
  {
  alert($(this.options[this.selectedIndex]).index());
   .....

在Firefox和Chrome中都经过测试。

获取optgroup中选择选项的索引

5 个答案: