如何在選擇下拉菜單中確定鼠標下方的選項？

我在使用jQuery在下拉菜單中實現以下行爲時遇到問題。我喜歡它，所以當用戶鼠標懸停其中一個選項時，div會突出顯示。快速谷歌搜索給我這樣的「非jQuery的」的方式，我已經創建了一個搗鼓這裏：如何在選擇下拉菜單中確定鼠標下方的選項？

<html> 
<head> 
<script type="text/javascript"> 

function showSelectValue(e) { 
if (e.target.id!= 'select') { 
document.getElementById('test').innerHTML = e.target.value; 
} 
} 

function attachTest() { 
document.getElementById('select').addEventListener('mouseover',showSelectValue,false); 
} 

</script> 

</head> 

<body onload="attachTest()"> 

<div id="test">Something Here</div> 

<select id="select"> 
<option value="1">One</option> 
<option value="2">Two</option> 
<option value="3">Three</option> 
<option value="4">Four</option> 
</select> 

</body> 
</html>

這種效果大致說明了預期的效果。文字根據用戶選擇的選項而改變（不需要點擊來選擇）。我目前對我的選擇實施了一個onMouseOver處理程序，但我在確定突出顯示哪個選項時遇到問題。我如何做到這一點？

來源

2012-04-02 duffmandrinkduff

我不確定你想要什麼，但使用'e.target.text'來獲得選項的文本。 http://jsfiddle.net/skram/RY5r4/2/或http://jsfiddle.net/skram/RY5r4/5/用於文本和值。 – 2012-04-02 19:46:59

如果它對任何人有任何用處，腳本移動到jsFiddle的腳本部分：http://jsfiddle.net/RY5r4/4/ – 2012-04-02 19:47:56

轉換爲jQuery的：

$('#select').mouseover(function(e) { 
    if (e.target.id != 'select') { 
    $('#test').text(e.target.value); 
    } 
});

http://jsfiddle.net/Guffa/RY5r4/7/

此，如果課程只在瀏覽器上運行，其中一個select元素實際上是顯示爲下拉列表。另外，Internet Explorer不支持這一點。

來源

2012-04-02 20:26:47 Guffa

似乎只能在Firefox上工作，但一直是迄今爲止最好的答案。我並不在乎IE，但它似乎並不適用於Chrome。有什麼建議麼？ – duffmandrinkduff 2012-04-02 20:40:23

@duffmandrinkduff：不是真的，如果它不被支持，它是可能的，這是值得懷疑的。似乎只有少數瀏覽器將這些選項視爲元素，這並不令人感到意外，因爲標準中沒有任何內容表示選項標籤應該變成實際的DOM元素。 – Guffa 2012-04-02 21:11:18

我很確定沒有辦法做到這一點;或者至少沒有辦法做到甚至是遠程跨瀏覽器兼容。正如Mouseover option of select for IE提到的，你可以嘗試的jQuery UI Selectmenu：

http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

來源

2012-04-02 20:09:00

如何在選擇下拉菜單中確定鼠標下方的選項？

回答

相關問題