JS+DIV+CSS实现仿表单下拉列表效果

本文实例讲述了JS+DIV+CSS实现仿表单下拉列表效果。分享给大家供大家参考。具体如下：
JS+DIV+CSS实现仿表单下拉列表效果，是完全用CSS技术再配合JS实现的效果，用来代替传统的Select下拉框，虽然目前来说，此代码还有些粗糙，但对于美化列表的样式来说，可能以后会更方便，要比Select方便的多。
运行效果截图如下：

在线演示地址如下：
http://demo.jb51.net/js/2015/js-div-css-fselect-codes/
具体代码如下：

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>DIV+CSS+JS仿下拉表单</title><script type="text/javascript" >function $$$$$（_sId）{ return document.getElementById（_sId）; }function hide（_sId） {$$$$$（_sId）.style.display = $$$$$（_sId）.style.display == "none" ? "" : "none";}function pick（v） { document.getElementById（"am"）.value=v;hide（"HMF-1"）}function bgcolor（id）{ document.getElementById（id）.style.background="#F7FFFA"; document.getElementById（id）.style.color="#000";}function nocolor（id）{ document.getElementById（id）.style.background=""; document.getElementById（id）.style.color="#788F72";}</script><style type="text/css">*{margin:0px; padding:0px;}body{font-family: Arial, Helvetica, sans-serif;font-size: 12px;}.cur{cursor:pointer; display:block;color:#788F72;width:146px; height:22px; line-height:22px; padding:0px 0px 0px 2px;}.am{border: 0px;color:#788F72;cursor: pointer;background:#fff url（"0.gif"） no-repeat; width: 150px;height: 19px;margin:10px 0px 0px 10px; padding:3px 0px 0px 2px;}.bm{border: 1px #999999 solid ;width: 148px; margin-left:10px;}</style></head><body><form><input onclick="hide（"HMF-1"）" type="text" value="请选择" id="am" class="am" /><div id="HMF-1" style="display: none " class="bm"> <span id="a1" onclick="pick（"ASP"）" onMouseOver="bgcolor（"a1"）" onMouseOut="nocolor（"a1"）" class="cur">ASP</span> <span id="a2" onclick="pick（"PHP"）" onMouseOver="bgcolor（"a2"）" onMouseOut="nocolor（"a2"）" class="cur">PHP</span> <span id="a3" onclick="pick（"JSP"）" onMouseOver="bgcolor（"a3"）" onMouseOut="nocolor（"a3"）" class="cur">JSP</span> <span id="a4" onclick="pick（"ASP.NET"）" onMouseOver="bgcolor（"a4"）" onMouseOut="nocolor（"a4"）" class="cur">ASP.NET</span> <span id="a5" onclick="pick（"JAVA"）" onMouseOver="bgcolor（"a5"）" onMouseOut="nocolor（"a5"）" class="cur">JAVA</span> <span id="a6" onclick="pick（"DELPHI"）" onMouseOver="bgcolor（"a6"）" onMouseOut="nocolor（"a6"）" class="cur">DELPHI</span></div></form></body></html>

希望本文所述对大家的javascript程序设计有所帮助。