下拉列表框，鼠标点击文本框，出现下拉，鼠标(离开的时候或者点击网页其他位置时)下拉列表消失。鼠标放到下拉列表的某一项上变背景色，点击下拉列表的某一项将该项的值显示在文本框内，然后下拉列表消失。
<!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 { 80px; height:30px; background-color:#CFF; text-align:center; line-height:30px; vertical-align:middle; } #b { 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>
阻止事件冒泡
<!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> </head> <body> <div id="wai" style="100%; height:800px;" onclick="showb()" > <div id="nei" style="200px; height:200px; background-color:#096;" onclick="showa()"></div> <div id="aa" style="200px; height:200px; background-color:#C36; display:none"></div> </div> </body> <script type="text/javascript"> //显示 function showa() { document.getElementById("aa").style.display="block" stopEventBubble(event); //阻止事件冒泡 } //阻止事件冒泡函数 function stopEventBubble(event) { var e=event || window.event; if (e && e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble=true; } } //隐藏 function showb() { document.getElementById("aa").style.display="none" } </script> </html>