índice de seleccionar la opción en un optgroup con jQuery

Question

Tengo el siguiente selecto:

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

Necesito encontrar la índice general de la opción seleccionada, pero el optgroup está haciendo tan difícil. En otras palabras, el seleccionado debe devolver 6, pero está volviendo 2. He intentado esto:

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

Pero que devuelve el índice dentro de ese optgroup, no el índice general. No puedo cambiar el formato o los valores de las opciones de selección.

Answer 1

Erm ... ¿por qué no son buenos los viejos métodos DOM? Para un solo-select:

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

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

O, que también funciona en múltiples selecciona, obtener el nodo option elemento que le interesa a buscar option.index en él.

Esto es masivamente mas rapido y simple que jQuery para procesar selectores complejos.

Answer 2

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

Un poco feo, pero creo que eso funcionaría.

Answer 3

Utilice la función index() para buscar un elemento dentro de un conjunto. Construya un conjunto de todas las opciones usando $("#end option"). Encuentre la opción seleccionada utilizando el pseudo-elemento :selected. Nota: Los índices están basados ​​en 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

Lo mismo en forma jQuery es también corto y simple:

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

Answer 6

También puede probar esto:

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

Esto funcionó para mí. El attr('selectedIndex') solo aparece sin definir con la lista de selección.

Answer 7

De acuerdo con su problema al devolver el valor de índice de todas las opciones seleccionadas. puede probar el siguiente código, puede ser de ayuda.

código:

código 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)); 
       }); 
      }); 
    });}); 

código 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>