uzyskać indeks wybranej opcji w optgroup z jQuery

Question

Mam następujący wybierz:

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

muszę znaleźć ogólną indeks wybranej opcji, ale optgroup sprawia, że ​​trudne. Innymi słowy, wybrana jedna powinna powrócić 6, ale to wraca 2. Próbowałem to:

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

Ale to zwraca indeks w tym optgroup, a nie ogólny indeks. Nie mogę zmienić formatu ani wartości wybranych opcji.

Answer 1

Erm ... dlaczego nie ma dobrych starych metod DOM? Dla pojedynczej-select:

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

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

OR, który będzie również działać na multi-wybiera, uzyskać węzeł option elementów, które Cię interesują i sprowadzić option.index na nim.

To znacznie szybsze i prostsze niż uzyskanie jQuery do przetwarzania złożonych selektorów.

Answer 2

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

Trochę brzydki, ale myślę, że by działać.

Answer 3

Użyj funkcji index() znaleźć element w zestawie. Zbuduj zestaw wszystkich opcji za pomocą $("#end option"). Znajdź wybraną opcję za pomocą pseudoelementu :selected. Uwaga: Indeksy są oparte na 0.

Answer 4

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

samo w jQuery sposób jest również krótka i prosta:

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

Answer 6

Możesz też spróbować:

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

Ten pracował dla mnie. Numer attr('selectedIndex') jest tylko niezdefiniowany z listą wyboru.

Answer 7

Według problemu powracającego wartość indeksu wszystkich wybranych opcja jest. możesz spróbować tego kodu, może ci pomóc.

Kod:

JavaScript Kod:

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

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