4

如果我有如下选项列表：

<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 等等......

4

5 回答 5

6

这是一个稍微复杂的任务，因为没有本地方法可以做到这一点。我将根据当前的浏览器标准来回答：在旧浏览器中可以做到这一点，但工作量更大。

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在测试时将集合过滤到一个数组中。同样，它 requires Array#indexOf，在 IE <9 中也不存在。

于 2013-11-14T14:00:44.927 回答
1

使用纯 JavaScript

var element = document.getElementById('optionList');
console.log(element.options[element.selectedIndex].parentNode.label);
于 2013-11-14T13:49:41.273 回答
0

jQuery跨浏览器解决方案：

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

预习

于 2013-11-14T13:59:32.170 回答
0

尝试这个：

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/

于 2013-11-14T14:00:48.490 回答
0

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

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

在 Firefox 和 Chrome 中测试。

于 2019-02-20T04:34:27.823 回答