JavaScript获取选项元素的位置？

Question

我有一个网络应用程序需要知道多选列表中选项元素的位置（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);
    });
});

这是一个快速而肮脏的解决方案！

更新

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