javascript 输入框提示列表效果

代码可以更简洁些，有更简便的方法欢迎贡献出来啊。

<！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"></style> <script type="text/javascript"> function showAndHide（obj,types）{ var Layer=window.document.getElementById（obj）; switch（types）{ case "show": Layer.style.display="block"; break; case "hide": Layer.style.display="none"; } } function getValue（obj,str）{ var input=window.document.getElementById（obj）; input.value=str; } </script> </head> <body>Location：<input type="text" id="txt" name="txt" onClick="showAndHide（"List1","show"）;" onblur="showAndHide（"List1","hide"）;"><ul> <li onmousedown="getValue（"txt","中国CHINA"）;showAndHide（"List1","hide"）;">中国CHINA</li> <li onmousedown="getValue（"txt","美国USA"）;showAndHide（"List1","hide"）;">美国USA</li> </ul> Sex：<input type="text" id="txt2" name="txt2" onClick="showAndHide（"List2","show"）;" onblur="showAndHide（"List2","hide"）;"> <ul> <li onmousedown="getValue（"txt2","男Male"）;showAndHide（"List2","hide"）;">男Male</li> <li onmousedown="getValue（"txt2","女Female"）;showAndHide（"List2","hide"）;">女Female</li> </ul> education：<input type="text" id="txt3" name="txt3" onClick="showAndHide（"List3","show"）;" onblur="showAndHide（"List3","hide"）;"> <ul> <li onmousedown="getValue（"txt3","大专"）;showAndHide（"List3","hide"）;">大专</li> <li onmousedown="getValue（"txt3","本科"）;showAndHide（"List3","hide"）;">本科</li> <li onmousedown="getValue（"txt3","硕士"）;showAndHide（"List3","hide"）;">硕士</li> <li onmousedown="getValue（"txt3","本科"）;showAndHide（"List3","hide"）;">本科</li> </ul> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]