ottenere l'indice di selezionare l'opzione in un optgroup con jQuery

Question

Ho il seguente selezionare:

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

ho bisogno di trovare il complessiva dell'indice dell'opzione selezionata, ma l'optgroup sta facendo poi così difficile. In altre parole, quello selezionato deve restituire 6, ma è il ritorno 2. Ho provato questo:

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

Ma che restituisce l'indice all'interno di quella optgroup, non l'indice generale. Non riesco a modificare il formato o i valori delle opzioni di selezione.

Answer 1

Erm ... perché non buoni vecchi metodi DOM? Per un singolo-select:

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

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

Oppure, che sarà anche lavorare su multi-seleziona, ottenere il nodo option elemento che ti interessa e prendere option.index su di esso.

Questo è molto più veloce e semplice di ottenere jQuery per elaborare selettori complessi.

Answer 2

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

Un po 'brutto ma penso che funzionerebbe.

Answer 3

Utilizzare la funzione index() per trovare un elemento all'interno di un set. Costruisci un insieme di tutte le opzioni usando $("#end option"). Trova l'opzione selezionata usando lo pseudo-elemento :selected. Nota: gli indici sono basati su 0.

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

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

la stessa cosa in modo jQuery è anche breve e semplice:

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

Answer 6

Si può anche provare questo:

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

Questo ha funzionato per me. Il viene visualizzato solo con l'elenco di selezione non definito.

Answer 7

In base al problema, restituendo il valore dell'indice di tutte le opzioni selezionate. puoi provare a seguire il codice, potrebbe esserti d'aiuto.

codice:

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

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