javascript模拟select实现代码

最近迷茫于javascript的闭包与继承，写一个小东西找找感觉。

JS+CSS模拟Select下拉框，选择表单效果

网页中使用Select语法实现的下拉框是很普遍的，但是您有没有见过使用JS+CSS模拟的Select下拉框？并且可以选择表单哦，尽管代码复杂了点，但是对于我们了解此类特效非常有帮助。

<！DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <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:71px; height:22px; line-height:22px; padding:0px 0px 0px 2px; } .am { border: 0px; color:#788F72; cursor: pointer; background: url（/uploads/allimg/1111/icon_111.jpg） no-repeat center center; border:1px #ccc solid; display:block; cursor:pointer; width:73px; height: 19px; margin:10px 0px 0px 10px; padding:3px 0px 0px 2px; } .bm { border: 1px #999999 solid; width:73px; margin-left:10px; } </style> </head> <body> <form> <input onclick="hide（"HMF-1"）" type="text" value="请选择" id="am" class="am" /><span id="a1" onclick="pick（"测试一"）" onMouseOver="bgcolor（"a1"）" onMouseOut="nocolor（"a1"）" class="cur">测试一</span> <span id="a2" onclick="pick（"测试二"）" onMouseOver="bgcolor（"a2"）" onMouseOut="nocolor（"a2"）" class="cur">测试二</span> <span id="a3" onclick="pick（"测试三"）" onMouseOver="bgcolor（"a3"）" onMouseOut="nocolor（"a3"）" class="cur">测试三</span> <span id="a4" onclick="pick（"测试四"）" onMouseOver="bgcolor（"a4"）" onMouseOut="nocolor（"a4"）" class="cur">测试四</span> <span id="a5" onclick="pick（"测试五"）" onMouseOver="bgcolor（"a5"）" onMouseOut="nocolor（"a5"）" class="cur">测试五</span> <span id="a6" onclick="pick（"测试六"）" onMouseOver="bgcolor（"a6"）" onMouseOut="nocolor（"a6"）" class="cur">测试六</span></form> </body> </html>

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

这个作品在没有任何需求下完成，不保证能应用于实际应用，仅用于自娱自乐。

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

用js模拟实现表单select选择的功能

<！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=gb2312" /> <title>用js模拟实现表单select选择的功能</title> <style type="text/css"> .t_search {width:900px; margin:auto;} .t_s_item {width:100px; float:left;} /* s_select start */ .select_box {cursor:default; text-align:left;} .select_value {border:1px solid; filter:alpha（opacity:0）; visibility:hidden; overflow-x:hidden; overflow:auto; position:absolute;} .select_record0 {padding-left:4px; background:#fff; width:100%; color:#000; height:20px; line-height:20px;} .select_record1 {padding-left:4px; background:#ccc; width:100%; color:#000; height:20px; line-height:20px;} /* s_select end */ </style> <script type="text/javascript"> /* s_search start */ var sortname; var age; var addr; var keywords; var dropShow=false; var currentID; function dropdown（el）{ if（dropShow）{ dropFadeOut（）; }else{ currentID=document.getElementById（el）; currentID.style.visibility="visible"; dropFadeIn（）; } } function dropFadeIn（）{//选单淡入的效果 if（currentID.filters.alpha.opacity<100）{ currentID.filters.alpha.opacity+=20; fadeTimer=setTimeout（"dropFadeIn（）",50）; }else{ dropShow=true; clearTimeout（fadeTimer）; } } function dropFadeOut（）{//选单淡出的效果 if（currentID.filters.alpha.opacity>0）{ clearTimeout（fadeTimer）; currentID.filters.alpha.opacity-=20; fadeTimer=setTimeout（"dropFadeOut（）",50）; }else{ dropShow=false; currentID.style.visibility="hidden"; } } function dropdownHide（）{ if（dropShow）{ dropFadeOut（）; dropShow=false; } } function hiLight（el）{//高亮度显示指标位置 if（dropShow）{ for（i=0;i<el.parentElement.childNodes.length;i++）{ el.parentElement.childNodes（i）.className="select_record0"; } el.className="select_record1"; } } function CheckMe（el）{//替换显示内容 //预留 var tempTxt; tempTxt=el.innerText; if（el.innerText.indexOf（"┝"） >= 0）{tempTxt=el.innerText.replace（"┝",""）;} document.getElementById（"text"）.innerText=tempTxt.substring（0,tempTxt.indexOf（"|"））; tempstr=tempTxt.substring（tempTxt.indexOf（"|"）+1）; } function CheckMe1（el）{//替换显示内容 document.getElementById（"text1"）.innerText=el.innerText; sortname=el.innerText; } function CheckMe2（el）{//替换显示内容 document.getElementById（"text2"）.innerText=el.innerText; age=el.innerText; } function CheckMe3（el）{//替换显示内容 document.getElementById（"text3"）.innerText=el.innerText; addr=el.innerText; } document.onclick=dropdownHide; function go_search（）{ keywords=document.getElementById（"form_search"）.keywords.value; if（！sortname）{sortname="";} if（！age）{age="";} if（！addr）{addr="";} if（keywords=="请输入你要找的信息！"）{keywords="";} location.href="userlist.php？sortname="+sortname+"&age="+age+"&addr="+addr+"&keywords="+keywords; } /* s_search end */ </script> </head> <body><form id="form_search" name="form_search" action="userlist.php" method="get"><nobr><label id="text1">选择类别</label></nobr> 类别1 类别2 类别3 <nobr><label id="text2">年龄</label></nobr> 18-25岁 26-32岁 <nobr><label id="text3">所在地</label></nobr> 上海 浙江 福建 广东<input style="width:264px; height:18px; border-style:none; background:none; padding-top:4px; padding-left:4px;" name="keywords" id="keywords" value="请输入你要找的信息！" type="text" onfocus="javascript:this.value="";" /> <img src="wp-content/uploads/2010/11/t_s_btn.jpg" width="100" height="24" alt="search" border="0" onclick="go_search（）" /> </form></body> </html>

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

在不改变HTML结构的前提下，可更改其它样式。建议用IE8与FF浏览，可与默认样式进行对比。

发布一来是为了记录自己学习过程，二来想请朋友指点一下迷津，哪些地方欠妥或者有更好的思路可以给我指点一下，谢谢。