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

Question

如何设置当鼠标移动到索引选项上时要选择的多选对象的索引。例如在接下来的html代码中，当鼠标移到选项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

发生的情况是，资源管理器不会为选项标签触发任何事件，也不允许我们获取其坐标或尺寸，因此我认为唯一要做的就是欺骗浏览器：

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

代码：

    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＆amp;野生动物园。

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

document.body.removeChild( d );

希望这有帮助。

Answer 2

您可以使用 jQuery：

$("option").mouseover(function(){
    $(this).prop("selected",true);
});

Answer 3

如果你想给 select 元素一个 id 为“mySelect”的

<select size="6" multiple="multiple" id ="mySelect">
                  ...
</select>

简单 JavaScript，它会像这样实现：

<script type = "text/javascript">

var element = document.getElementById("mySelect");
var options = element.options;
for(var i = 0; i<options.length; i++){
    options.item(i).onmouseover = function(e){
        e.target.parentNode.selectedIndex = e.target.value-1;
    };
}

</script>