如何在鼠标移过该选项时获取多选对象的选项

如何在鼠标移过该索引选项时设置要选择的多选对象的索引。例如在下一个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>

来源

2011-12-23 Sami Al-Subhi

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

获取[select]对象使用其ID。
接下来，获取第一个[option]对象（出于某种原因，并非所有选择对象的子项都是选项...我猜有些文本是节点，因为我们使用了空格来缩进HTML，所以我“使用第二子M（项[1]），以便获得至第一个[选项]元素的引用。
创建将被用来作为隐藏画布虚设div元素。
设置div到绝对位置&能见度隐藏所以不会我们显示并且不会影响内容
设置th e div的高度与[选项]标签字体大小样式中指定的大小（这是一个窍门，我试图通过它的字体大小来计算[option]元素的高度。有时候这个的值是以点（例如10pt）指定的，所以我创建了一个与完全相同的高度的div，并要求浏览器以像素为单位返回高度。一旦我拥有了 [option]元素的高度，其余的都是微不足道的。
从鼠标的y坐标中减去选择最顶端的位置，并除以[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; 
     } 
    } 
}

不要忘了给[选择]合适的ID（ID = “mySelect”）&也在[select]上添加onmousemove =“select（event）”。这适用于我：铬，火狐（3.6），资源管理器8，资源管理器6（模拟），歌剧& Safari。

记住要删除文档中的测试DIV当我们用它做，否则会有一堆的DOM未使用的DIV的，所以在ieElementFromPoint结束（）地址：

文件。 body.removeChild（d）;

希望得到这个帮助。

来源

2011-12-24 00:20:47 Yaniro

您可以使用jQuery：

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

来源

2011-12-23 22:49:34 Purag

谢谢，但我没有使用jQuery – 2011-12-23 22:59:26

如果你想给的选择元素 “mySelect”

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

用普通的JavaScript的ID，就这样来实现：

<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>

来源

2011-12-23 22:52:50

非常感谢，但这不适用于IE9。它适用于Firefox，Chrome和Safari。 – 2011-12-23 23:16:35

经过一段时间的搜索后，我发现IE（至少6-8）不会触发

如何在鼠标移过该选项时获取多选对象的选项

回答