使用 jquery 获取 optgroup 中选择选项的索引答案

【问题标题】：Get index of select option in an optgroup with jquery使用 jquery 获取 optgroup 中选择选项的索引
【发布时间】：2010-02-09 00:20:28
【问题描述】：

我有以下选择：

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

我需要找到所选选项的 overall 索引，但 optgroup 使这变得困难。换句话说，选择的应该返回 6，但它返回 2。我试过这个：

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

但这会返回该选项组中的索引，而不是整体索引。我无法更改选择选项的格式或值。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

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

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

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

这比让 jQuery 处理复杂的选择器更快更简单。

【讨论】：

嘿，完全正确。 Cripes，我将继续从这个 DOM 无知的节目中删除“javascript”标签。
但这适用于 optgroup 吗？我想我应该测试一下。
是的，selectedIndex 将是 6，如问题所述。
是的，它确实有效。比jquery方式高效多了！我正在将答案切换到此解决方案。谢谢！
@Cresent - 我刚刚添加了 javascript 标签。由于我现在选择了一个 javascript 答案，所以这样做似乎很合适。

【解决方案2】：

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

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

【讨论】：

哦，很高兴知道。（哦，那是 1.4 的新东西；我等不及要升级了。）
@Pointy：没有什么需要 jQuery 1.4。我已经链接到这些文档，但据我所知，这适用于任何版本。
漂亮！那很完美。谢谢。
@cletuus 哦，那好吧；我按照 jQuery API 文档中关于“索引（选择器）”的说法进行操作 - “添加的版本：1.4”
@Pointy：是的，那是新的，但我使用的是“自 1.0 以来”的index(element)。

【解决方案3】：

你也可以试试这个：

$('#end option:selected').prop('index')

这对我有用。 attr('selectedIndex') 仅在选择列表中显示 undefined。

【讨论】：

【解决方案4】：

同样的事情在jquery方式中也是短小精悍的：

var idx = $('#end').attr('selectedIndex');

【讨论】：

【解决方案5】：

//funcion para seleccionar con jquery por el index del select 
var text = '';
var canal = ($("#name_canal").val()).split(' ');
$('#id_empresa option').each(function(i, option) {
        text = $('#id_empresa option:eq('+i+')').text();
        if(text.toLowerCase() == canal[0].toLowerCase()){
            $('#id_empresa option:eq('+i+')').attr('selected', true);
        }
    });

【讨论】：

【解决方案6】：

var index = -1;
$('#end option').each(function(i, option) {
  if (option.selected) index = i;
});

有点难看，但我认为这行得通。

【讨论】：

【解决方案7】：

根据您的问题返回所有选定选项的索引值。你可以试试下面的代码，可能对你有帮助。

代码：

javascript代码：

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">

       $(function(){

                $('#allcheck').click(function(){
                var chk=$('#select_option >optgroup > option:selected');
                   chk.each(function(){
                       alert('Index: ' + $('option').index(this));
                });
            });
   });});

HTML 代码：

       <select multiple="multiple" size="10" id="select_option" name="option_value[]">
         <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>

     <strong>Select&nbsp;&nbsp;<a style="cursor:pointer;" id="allcheck">All</a>
 </strong>

【讨论】：