javascript - 当鼠标移到该选项上时如何获取要选择的多选对象的选项

Question

如何设置当鼠标移到该索引选项上时要选择的多选对象的索引。例如在下一个html 代码中，当鼠标移动到option 1 上时，它将被选中。我想在 JavaScript 中全部完成，而无需编辑 html 代码。

<select size="6" multiple="multiple">
        <option value="1">option 1</option>
        <option value="2">option 2</option>
        <option value="3">option 3</option>
        <option value="4">option 4</option>
        <option value="5">option 5</option>
        <option value="6">option 6</option>
</select>

Answer 1

Explorer 不会为 options 标签触发任何事件，也不允许我们获取其坐标或尺寸，所以我认为唯一剩下要做的就是稍微欺骗浏览器:

1. 使用其 ID 获取 [select] 对象。
2. 接下来，获取第一个 [option] 对象(由于某种原因不是所有的 选择对象的 child 是选项...我猜有些是文本 节点，因为我们使用空格缩进 HTML，所以我使用 第二个 child (选项[1])以获得对 第一个 [option] 元素。
3. 创建一个将用作隐藏 Canvas 的虚拟 div 元素。
4. 将 div 设置为绝对位置并隐藏可见性，这样我们就不会 显示并且不会影响内容。
5. 将 div 的高度设置为 [option] 标签中指定的大小 字体大小样式(这是技巧，我正在尝试计算 [option] 元素的高度与其字体大小。有时这个 值以点为单位指定(例如 10pt)，所以我正在创建一个 div 它的高度值完全相同，并要求浏览器给出 以像素为单位返回给我的高度。一旦我有了 [option] 元素，其余的都是微不足道的。
6. 从 y 坐标中减去选择的最顶部位置 鼠标的高度除以 [option] 元素的高度。这 将为我们提供鼠标当前所在的元素 (鼠标顶部位置 - 选择顶部位置从屏幕转换 坐标到选择框坐标并除以高度 [option] 元素的 [option] 元素为我们提供了当前的 [option]。
7. 取当前[option]的编号作为 selectedIndex.

代码:

    function ieElementFromPoint( e )
    {
        var select  = document.getElementById( "mySelect" );
        var options = select.childNodes;
        var d = document.createElement( "DIV" );
        d.style.position = "absolute";
        d.style.visibility = "hidden";
        d.style.height = options[ 1 ].currentStyle.fontSize;
        document.body.appendChild( d );
        select.selectedIndex = ( Math.round( ( ( e.clientY + document.body.scrollTop ) - select.offsetTop ) / d.offsetHeight ) );
     }

对于其他浏览器，处理要简单得多:

var old = null;

function select( e )
{
    if ( document.all )
    {
        ieElementFromPoint( e );
    }
    else
    {
        var option = e.target;

        if ( option.tagName == "OPTION" )
        {
            if ( old != null )
            {
                old.selected = false;
            }

            old = option;
            option.selected = true;
        }
    }
}

不要忘记为 [select] 提供正确的 id (id="mySelect") 并在 [select] 上添加 onmousemove="select( event )"。 这适用于我:Chrome、FireFox (3.6)、Explorer 8、Explorer 6(模拟)、Opera 和 Safari。

记得在我们完成后从文档中删除测试 DIV，否则 DOM 中将有一堆未使用的 DIV，因此在 ieElementFromPoint() 的末尾添加:

document.body.removeChild(d);

希望这对您有所帮助。