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"));

Answer 3

你也可以试试这个：

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

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

Answer 4

jquery方式中的同样东西也很简单：

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

Answer 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);
        }
    });

Answer 6

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

有点难看，但我觉得那很有用。

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

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

7 个答案: