javascript模拟select实现代码_表单特效

2020-11-27 来源：汇智旅游网

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

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

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

<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> </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

这个作品在没有任何需求下完成，不保证能应用于实际应用，仅用于自娱自乐。
<style type="text/css"></style> <h2>浏览器默认样式</h2> <p> <select style="width: 200px; margin: 10px 30px; height: 22px; border: 1px solid #ccc; font-size: 14px; z-index: 0;"><option>select1</option><option>select2</option><option>select3</option><option>select4</option></select></p> <h2>js模拟select,样式主要参照IE8与Firefox。</h2> <li><input type="text" class="text" onclick="beginSelect(this);" /> </li> <li class="select"> <p>select1</p> <p>select2</p> <p>select3</p> <p>select4</p> </li> <p>在不改变HTML结构的前提下，可更改其它样式。建议用IE8与FF浏览，可与默认样式进行对比。</p> <script type="text/javascript">// </ script>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

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

<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> </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

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

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

显示全文

全部栏目

javascript模拟select实现代码_表单特效