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