JavaScript obtient la position de l'élément d'option?

J'ai une application Web qui doit connaître la position (x / y pas l'index!) D'un élément d'option dans une liste multi-sélection. Il fonctionne très bien dans Firefox mais pas de dés dans Chrome ou IE.

Est-il possible d'obtenir la position d'une option dans Chrome / IE avec JavaScript?

Voici mon violon qui affiche le problème: http://jsfiddle.net/jamiller619/Kbh4g/3/ Fonctionne avec Firefox mais pas dans IE / Chrome.

Réponse courte – vous ne pouvez pas (problème webkit).

Mais vous pouvez tricher !!!

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

C'est une solution rapide et sale!

METTRE À JOUR

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