本文实例讲述了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" ";} 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 type="text" value="请选择" id="am" /> <div id="HMF-1"> <span id="a1" onMouseOver="bgcolor('a1')" onMouseOut="nocolor('a1')">ASP</span> <span id="a2" onMouseOver="bgcolor('a2')" onMouseOut="nocolor('a2')">PHP</span> <span id="a3" onMouseOver="bgcolor('a3')" onMouseOut="nocolor('a3')">JSP</span> <span id="a4" onMouseOver="bgcolor('a4')" onMouseOut="nocolor('a4')">ASP.NET</span> <span id="a5" onMouseOver="bgcolor('a5')" onMouseOut="nocolor('a5')">JAVA</span> <span id="a6" onMouseOver="bgcolor('a6')" onMouseOut="nocolor('a6')">DELPHI</span> </div> </form> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。
【JS+DIV+CSS实现仿表单下拉列表效果】相关文章：
★ 美化下拉列表