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

你可以使用jQuery：

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

Answer 2

如果你想给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>

Answer 3

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

使用其ID获取[select]对象。
接下来，获取第一个[option]对象（由于某种原因，不是全部的选择对象的子项是选项...我猜有些是文本节点，因为我们使用空格来缩进HTML，所以我正在使用第二个孩子（选项[1]）以获得参考第一个[选项]元素。
创建一个虚拟div元素，用作隐藏画布。
将div设置为绝对位置＆amp;可见性隐藏所以我们不会显示但不会影响内容。
将div的高度设置为[option]标签中指定的大小 font-size style（这是诀窍，我正在尝试计算 [option]元素的高度由font-size决定。有时这个值以点（例如10pt）指定，所以我正在创建一个div 它的高度值完全相同，并要求浏览器给出高度以像素为单位回到我的身高。一旦我有了高度 [选项]元素，其余的都是微不足道的。
从y坐标中减去select中的最顶部位置鼠标的长度除以[option]元素的高度。这个将为我们提供鼠标当前所在的元素（鼠标顶部位置 - 选择顶部位置从屏幕转换坐标到选择框坐标并除以高度 [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”）＆amp;在[select]上添加onmousemove =“select（event）”。这适用于我：Chrome，FireFox（3.6），Explorer 8，Explorer 6（模拟），Opera和Safari浏览器。

记得在我们完成它时从文档中删除测试DIV，否则DOM中会有一堆未使用的DIV，所以在ieElementFromPoint（）的末尾添加：

document.body.removeChild（d）;

希望得到这个帮助。

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

3 个答案: