JavaScript получает позицию элемента опции?

Question

У меня есть веб-приложение, которое должно знать позицию (x/y not index!) Элемента option внутри многосерийного списка. Он отлично работает в Firefox, но не в кости в Chrome или IE.

Возможно ли получить позицию опциона в Chrome/IE с помощью JavaScript?

Вот моя скрипка, отображающая проблему: http://jsfiddle.net/jamiller619/Kbh4g/3/ Работает с Firefox, но не в IE/Chrome.

Answer 1

Короткий ответ - вы не можете (проблема с веб-сайтом).

Но вы можете обмануть !!!

HTML:

<div style="position:relative"> 
<select multiple="multiple"> 
    <option>Test 1</option> 
    <option>Test 2</option> 
    <option>Test 3</option> 
    <option>Test 4</option> 
    <option>Test 5</option> 
    <option>Test 6</option> 
    <option>Test 7</option> 
    <option>Test 8</option> 
    <option>Test 9</option> 
    <option>Test 10</option> 
</select> 
</div> 
<br /> 
option position:<br /> 
Left: <span id="pos-x"></span><br /> 
Top: <span id="pos-y"></span> 

CSS:

select 
{ 
    font-size:20px;  
}​ 

JQuery:

$(function() 
{  
    $('select').change(function() { 
     var optionHeight = 20; // or get this value from the stylesheet or inline-style 
     var textIndent = 1; // best guess or work it out using coordinate crosshair tool 
     $('#pos-y').text((this.selectedIndex + 1) * optionHeight); 
     $('#pos-x').text(this.offsetLeft + textIndent); 
    }); 
}); 

Это быстрый и грязный раствор!

UPDATE

CSS:

select 
{ 
    height: 150px; 
    font-size: 20px;   
} 

JQuery:

$(function() 
{  
    $('select').change(function() { 
     var fontSize = 20; // or get this value from the stylesheet or inline-style 
     var lineHeight = fontSize + 4 // need a better calculation here 
     var optionHeight = lineHeight; 
     var textIndent = 1; // best guess or work it out using coordinate crosshair tool 
     var top = (this.selectedIndex * optionHeight) - this.scrollTop; 
     $('#pos-y').text(top); 
     $('#pos-x').text(this.offsetLeft + textIndent); 
    }); 
});