Получить индекс опции select в optgroup с jquery

У меня есть следующий выбор:

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

Мне нужно найти общий индекс выбранного параметра, но группа opttroup делает это трудным. Другими словами, выбранный должен вернуть 6, но он возвращается 2. Я пробовал это:

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

Но это возвращает индекс внутри этой optgroup, а не общий индекс. Я не могу изменить формат или значения параметров выбора.

Ответ 1

Эмм... почему бы не старые добрые методы DOM? Для одного выбора:

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

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

Или, который также будет работать с несколькими выборами, получите элемент option node, который вам интересен, и выберите option.index на нем.

Это намного быстрее и проще, чем получение jQuery для обработки сложных селекторов.

Ответ 2

Используйте функцию index(), чтобы найти элемент внутри набора. Постройте набор всех параметров с помощью $("#end option"). Найдите выбранную опцию с помощью псевдоэлемента :selected. Примечание. индексы основаны на 0.

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

Ответ 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>