JavaScript获得期权元素的位置？ [英] JavaScript get position of option element?

问题描述

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

是否有可能通过JavaScript在Chrome / IE中获得选项？

这里是我的小提琴，展示了这个问题： http://jsfiddle.net/ jamiller619 / Kbh4g / 3 / 适用于Firefox，但不适用于IE / Chrome。 解决方案

't（webkit问题）。

但是你可以作弊!!! b
HTML：

 < div style =position：relative> 
< select multiple =multiple> 
< option> Test 1< / option> 
< option>测试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>测试9< / option> 
< option> Test 10< / option> 
< / select> 
< / div> 
< br /> 
选项位置：< br /> 
左：< span id =pos-x>< / span>< br /> 
上：< span id =pos-y>< / span> 
  

CSS：

  select 
 {
 font-size：20px; 
} 
  

JQuery：

< pre $ $（function（）
{
$（'select'）。change（function（）{
var optionHeight = 20; //或从样式表或内联样式获取此值
var textIndent = 1; //最好使用坐标十字线工具
$（'＃pos-y'）。text（（this。 selectedIndex + 1）* optionHeight）;
$（'＃pos-x'）.text（this.offsetLeft + textIndent）;
}）;
}）;


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

CSS：

b $ b height：150px;
font-size：20px;

$ / code>

JQuery：

  $（function（）
 {
 $（'select'）。change（function（）{
 var fontSize = 20 ; //或从样式表或内联样式中获取此值
 var lineHeight = fontSize + 4 //在此处需要更好的计算
 var optionHeight = lineHeight; 
 var textIndent = 1; / /最佳猜测或使用坐标十字线工具
 var top =（this.selectedIndex * optionHeight） -  this.scrollTop; 
 $（'＃pos-y'）。text（top）; 
 $（'＃pos-x'）.text（this.offsetLeft + textIndent）; 
}）; 
}）; 
  

I have a web app that needs to know the position (x/y not index!) of an option element inside a multi select list. It works great in Firefox but no dice in Chrome or IE.

Is it possible to get an option's position in Chrome/IE with JavaScript?

Here is my fiddle displaying the issue: http://jsfiddle.net/jamiller619/Kbh4g/3/ Works with Firefox but not in IE/Chrome.

解决方案

Short answer - you can't (webkit issue).

But you can cheat!!!

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

It's a quick and dirty solution!

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

这篇关于JavaScript获得期权元素的位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！