标签：
下拉列表框，鼠标点击文本框，出现下拉，鼠标(离开的时候或者点击网页其他位置时)下拉列表消失。鼠标放到下拉列表的某一项上变背景色，点击下拉列表的某一项将该项的值显示在文本框内，然后下拉列表消失。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #a { width:80px; height:30px; background-color:#CFF; text-align:center; line-height:30px; vertical-align:middle; } #b { width:80px; height:180px; background-color:#CF9; text-align:center; line-height:30px; vertical-align:middle; } #b div { text-align:center; line-height:30px; vertical-align:middle; } </style> </head> <body> <div id="q" onclick="wai()"> <input id="a" value="菜单" onclick="caidan()" onmouseout="likai()"/> <div id="b" style="display:none" > <div id="c" onmouseover="over(this)" onmouseout="out(this)" onclick="dianji(this)">苹果</div> <div id="d" onmouseover="over(this)" onmouseout="out(this)" onclick="dianji(this)">梨子</div> <div id="e" onmouseover="over(this)" onmouseout="out(this)" onclick="dianji(this)">山竹</div> <div id="f" onmouseover="over(this)" onmouseout="out(this)" onclick="dianji(this)">桃子</div> <div id="g" onmouseover="over(this)" onmouseout="out(this)" onclick="dianji(this)">核桃</div> <div id="h" onmouseover="over(this)" onmouseout="out(this)" onclick="dianji(this)">香蕉</div> </div> </div> </body> <script type="text/javascript"> function caidan(b) { document.getElementById("b").style.display="block"; stopEventBubble(event); //阻止事件冒泡 } function over(t) { t.style.backgroundColor="gray"; } function out(y) { y.style.backgroundColor="#CF9"; } function dianji(m) { var n=document.getElementById("a"); n.value = m.innerText; } function stopEventBubble(event) { var e=event || window.event; if (e && e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble=true; } } //隐藏 function wai() { document.getElementById("b").style.display="none"; } </script> </html>
标签：
原文地址：http://www.cnblogs.com/SJP666/p/4705910.html
