關於javaScript實現select下拉框自動展開
阿新 • • 發佈：2019-01-03
我本來的目的：是想實現滑鼠移動到select下拉框上，下拉框自動展開。
原先思路：使用onmouseover()滑鼠事件呼叫一個openSelect()函式，函式中呼叫onclick()方法，以為就可以了（程式碼如下），我想得太簡單了。
<head>
<script type="text/javascript">
<!--
function openSelect(obj){
var element=document.getElementById("student");
element.onclick();
}
-->
我在網上進行了一下的搜尋：
1. javascript滑鼠移動到select下拉框自動展開
2. javasctipt滑鼠懸停select自動展開
3. ………..等一系列，
結果都沒有我想要的結果，除了滑鼠的一些事件mouseover等沒有我想要的結果。有人說可以用div模擬一個下拉框，但那不是我想要的我想要的是滑鼠移動到上面可以自動展開；也有人說select沒有自動展開屬性，然後我去W3Cw3cschool地址
瞬間明白了，原來我以為我呼叫element.onclick();方法就是點選了下拉列表，這是大錯特錯！！！！！！
後來我又在百度找我想要的結果，研究了半天，最終讓我找到一個東西，可以讓我實現我想要的結果（高手還是有的，讓我瞬間膜拜！），最終程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>事件程式設計</title>
<script type="text/javascript">
<!--
function openSelect(obj){
var element=document.getElementById("student");
element.onclick = demo();
//document.getElementById("student").onclick();
}
function demo(){
student.focus();
var WshShell = new ActiveXObject("Wscript.Shell");
try {
WshShell.SendKeys("%{DOWN}");
} catch(e){}
WshShell.Quit;
}
-->
</script>
</head>
<body>
<center>
<input type="text" value="選擇使用者:" />
<select id="student" onmouseover="openSelect(this);">
<option value="--請選擇--">--請選擇--</option>
<option value="123">123</option>
<option value="456">456</option>
<option value="789">789</option>
</select>
</center>
</body>
</html>解決問題的核心程式碼是以下這個函式：
function demo(){
student.focus();
var WshShell = new ActiveXObject("Wscript.Shell");
try {
WshShell.SendKeys("%{DOWN}");
} catch(e){}
WshShell.Quit;
}當然這個函式我不懂，高手說“下面程式碼好像只能在IE下出效果”，我試了一下的確如此而且還會有一下問題（大概說的就是什麼安全性問題，我沒有仔細研究過）：
還有：
所以根據以上我總結一下：雖然上面提到的解決方案可以實現滑鼠移動到select下拉框自動展開功能，但是存在一些問題，比如安全性問題、瀏覽器相容性問題等，也就是說我覺得可能在實際開發情況下用它可能不太合適，很多解決方法是用div模擬一個select來實現一樣的效果。雖然研究了一個上午，但是還是學到東西了，中間都想放棄不管它了，但是大腦裡面一直覺得肯定有能夠實現的，所以一直各種查資料，就當紀念一下說服自己吧O(∩_∩)O哈哈~，希望我這小小的學習能給一些後來的朋友一些幫助，如果看到我這篇文章的人知道有更好的解決思路希望你能分享給我，共同學習共同進步。