JavaScript獲取期權元素的位置？

Question

我有一個web應用程序需要知道多選列表中選項元素的位置（x/y不是索引！）。它在Firefox中效果很好，但在Chrome或IE中沒有骰子。

是否有可能通過JavaScript在Chrome/IE中獲得選項的位置？

這是我的小提琴顯示問題：http://jsfiddle.net/jamiller619/Kbh4g/3/適用於Firefox，但不適用於IE/Chrome。

Answer 1

簡答 - 你不能（webkit問題）。

但你可以作弊！

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