JavaScript 获取选项元素的位置？

Question

我有一个网络应用程序需要知道多选列表中选项元素的位置（x/y 不是索引！）。它在 Firefox 中工作得很好，但在 Chrome 或 IE 中却没有。

是否可以使用 JavaScript 获取 Chrome/IE 中选项的位置？

这是我的小提琴显示问题：http://jsfiddle.net/jamiller619/Kbh4g/3/适用于 Firefox，但不适用于 IE/Chrome。

Answer 1

简短的回答 - 你不能（webkit 问题）。

\n\n

但你可以作弊！

\n\n

HTML：

\n\n

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

\n\n

CSS：

\n\n

select\n{\n    font-size:20px;    \n}\xe2\x80\x8b\n

\n\n

jQuery：

\n\n

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

\n\n

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

\n\n

更新

\n\n

CSS：

\n\n

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

\n\n

\xe2\x80\x8b\nJQuery：

\n\n

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

\n