jquery

2010-02-09 6 views
11

ile OPTGROUP seçin seçeneğinin endeksi alın Ben seçerek aşağıdaki: Ben seçilen seçeneğin genel endeksi bulmalıyız, ama OPTGROUP zor olduğunu yapıyorjquery

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

. Başka bir deyişle, seçilmiş bir 6 dönmelidir, ama bu çalıştı 2. dönüyor:

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

Ama o OPTGROUP içinde endeksi değil genel endeks döndürür. Seçme seçeneklerinin biçimini veya değerlerini değiştiremiyorum.

cevap

19

Erm ... neden eski iyi DOM yöntemleri değil? Bir tek seçimli için: Ayrıca çoklu seçer üzerinde çalışacak

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

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

Veya, ilgilendiğiniz option eleman düğümü almak ve üzerinde option.index getir.

Bu, karmaşık seçicileri işlemek için jQuery'yi almaktan çok daha hızlı ve daha basittir.

+0

Heh, * tam *. Cripes, devam edeceğim ve "javascript" etiketini DOM cehaletinin bu gösterisinden çıkaracağım. –

+0

Ancak bu, optgroup ile çalışacak mı? Sanırım test etmeliyim. – Tauren

+1

Evet, "selectedIndex", soruda belirtildiği gibi "6" olacak. – bobince

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

Biraz çirkin ama bence işe yarar.

9

Bir grup içindeki bir öğeyi bulmak için index() işlevini kullanın. $("#end option") kullanarak tüm seçenekler kümesi oluşturun. :selected sözde öğeyi kullanarak seçilen seçeneği bulun. Not: dizinleri 0 tabanlı.

+0

oh olduğunu bilmek güzel. (Bu yeni bir 1.4 şey, o yükseltmek için sabırsızlanıyorum. – Pointy

+0

@Pointy: hiçbir şey jQuery 1.4 gerektirmez. Bu dokümanlar ile bağlantı kurdum ancak anlayabildiğim kadarıyla, bu herhangi bir sürümde çalışır. – cletus

+0

Güzel! Bu mükemmel. Teşekkürler. – Tauren

1
//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); 
     } 
    }); 
2

jquery şekilde aynı şey kısa ve basittir:

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

bu doz işe yaramaz. –

3

Ayrıca bu deneyebilirsiniz: Bu benim için çalıştı

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

. attr('selectedIndex') sadece seçim listesiyle tanımsız olarak oluşturuldu.

0

Seçtiğiniz tüm seçeneklerin dizin değerini döndürerek sorununuza göre. kodunu takip etmeyi deneyebilir, size yardımcı olabilir.

kodu:

javascript kodu:

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

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