使用jquery获取optgroup中select选项的索引

Question

我有以下选择:

<select name="end" id="end"> 
    <optgroup label="Morning"> 
        <option value="12:00a">12:00 am</option> 
        <option value="12:30a">12:30 am</option> 
        <option value="1:00a">1:00 am</option> 
        <option value="1:30a">1:30 am</option> 
    </optgroup> 
    <optgroup label="Evening"> 
        <option value="12:00p">12:00 pm</option> 
        <option value="12:30p">12:30 pm</option> 
        <option value="1:00p" selected="selected">1:00 pm</option> 
        <option value="1:30p">1:30 pm</option> 
    </optgroup> 
</select> 

我需要找到所选选项的整体索引,但是optgroup正在变得困难.换句话说,所选择的应该返回6,但它返回2.我试过这个:

var idx = $('#end :selected').prevAll().size();

但是,它会返回该optgroup中的索引,而不是整个索引.我无法更改选择选项的格式或值.

Answer 1

呃...为什么不好的旧DOM方法呢？对于单选:

var idx= document.getElementById('end').selectedIndex;

// or $('#end')[0].selectedIndex if you must

或者,它也适用于多选,获取option您感兴趣的元素节点并在其上获取option.index.

这比使用jQuery处理复杂的选择器要快得多,也简单得多.

Answer 2

使用该index()函数查找集合中的元素.使用构造一组所有选项$("#end option").使用:selected伪元素查找选定的选项.注意:索引从0开始.

var options = $("#end option");
var idx = options.index(options.filter(":selected"));