2010-02-16 39 views
6

Bir sayfada birçok seçeneğe sahip bir (çok) kutum var. Şimdi ajax ile bazı verileri görüntülemek için son tıklanan öğeye tepki vermek istiyorum.Çoklu seçimlerde en son tıklanan seçeneği al

Seçenek öğesindeki "tıklatma" olayı IE'de çalışmadığından, şu anda "değişiklik" etkinliğini kullanıyorum.

Sorun şu ki, ilk önce diğer seçenekleri seçsem bile "değer" ve selectedIndex özniteliği, seçilen ilk öğeye işaret eder.

En son seçilen seçeneği alabilmemin tek yolu, "değişiklik" olayından önce ve sonra seçilen seçenekler kümesini karşılaştırmaktır.

Başka yolu var mı? Ben en çok son seçilen seçeneği alabilir

+0

bunu işlemek için bırakacağım? Eğer seçenek buysa, belki de istediğini yapmana izin verecek. – levik

+1

Teşekkürler, ama çoktan denedim. Etkinlikte seçeneğe referans yok. – Wikser

cevap

2

tek yolu önce ve "değişim" olaydan sonra seçilen seçenekleri kümesini karşılaştıran gereğidir.

Muhtemelen en iyi seçeneğiniz budur - iler tek tek seçeneklerdeki tıklatma olaylarını rapor etmeyecektir (yalnızca seçme kutusundaki tıklamaları rapor edecektir).

Gerçekten hangi seçeneğin tıklandığına karar vermek istiyorsanız (seçim kutusunun kendisinde bulunan tıklamaları dinlerken), olay nesnesinin offsetY özelliğine bakabilirsin (bu, fare imlecinin göreceli ofseti olacaktır) seçim kutusundaki ilk seçeneğin en üstüne - bu yüzden seçim kutusunun kaydırma ofsetini içerir) ve bunu önceden belirlenmiş seçenek boyutuna göre böler (bu, seçim kutusunun yazı tipi boyutuna bağlı olacaktır).

Ancak, kullanıcı klavyeden seçenekleri seçtiğinde bu size yardımcı olmaz.

1

Aşağıdaki kod mükemmel değildir. IE6'da tamamen doğru çalışmıyor, ancak IE7-8, Firefox, Safari (Win), Opera & Chrome'da gayet iyi. Sadece son tıklamayı bir değer seçmek için kaydeder, böylece bir diğerini seçmeden en son seçilmiş olan bir değerin seçilmemesi yine de son seçilen (şimdi seçili olmayan) indeksi döndürür. Eğer gerekirse seçme bir tıklama işleyicisi ekleyin ve etkinliğin hedefi bakarsak bunu seçmek olacaktır ...

<html> 
<head> 
    <title>Multiple selection indices attribute</title> 
    <script type='text/JavaScript'> 
     function oc(a) {var o={};for (var i=0;i<a.length;i++) {o[a[i]]='';}; return o;}; 

     function getIndices(ele) 
       {if (!ele.prevSelected) {ele.prevSelected=new Array();} 

       ele.selectedIndices=new Array(); 

       while (ele.selectedIndex != -1) 
        {ele.selectedIndices.push(ele.selectedIndex); 

        if (ele.selectedIndex in oc(ele.prevSelected)) {null;} 
        else {ele.newIndex = ele.selectedIndex;} 

        ele.options[ele.selectedIndex].selected = false; 
        }; 

       for (var i=0;i<ele.selectedIndices.length;i++) 
        {ele.options[ele.selectedIndices[i]].selected = true;}; 

       ele.prevSelected=new Array(); 

       if (ele.selectedIndices) 
        {for (var i=0;i<ele.selectedIndices.length;i++) 
         {ele.prevSelected.push(ele.selectedIndices[i]);} 
        } 
       }; 

      function display(ele) {if (ele.newIndex) {alert('Last selection: '+ele.newIndex);}}; 

    </script> 
</head> 
<body onload='getIndices(document.getElementById("mine"));'> 
    <select multiple='multiple' id='mine' size='10' onclick='getIndices(this);'> 
     <option value='A'> 0</option><option value='B'> 1</option> 
     <option value='C'> 2</option><option value='D'> 3</option> 
     <option value='E'> 4</option><option value='F'> 5</option> 
     <option value='G'> 6</option><option value='H'> 7</option> 
     <option value='I'> 8</option><option value='J'> 9</option> 
     <option value='K'>10</option><option value='L'>11</option> 
     <option value='M'>12</option><option value='N'>13</option> 
     <option value='O'>14</option><option value='P'>15</option> 
    </select> 
    <input type='button' value='Show' onclick='display(document.getElementById("mine"));' /> 
</body>