如何在鼠標移過該選項時獲取多選對象的選項

如何在鼠標移過該索引選項時設置要選擇的多選對象的索引。例如在下一個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）不會觸發

如何在鼠標移過該選項時獲取多選對象的選項

回答