javascript模拟select实现代码

时间:2020-05-12 人气:0

最近迷茫于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" /> 
<div> <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> </div> 
</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> 
<div> 
<form id="form_search" name="form_search" action="userlist.php" method="get"> 
<div> 
<div> 
<div> 
<nobr><label id="text1">选择类别</label></nobr> 
</div> 
<div> 
<div>类别1</div> 
<div>类别2</div> 
<div>类别3</div> 
</div> 
</div> 
</div> 
<div> 
<div> 
<div> 
<nobr><label id="text2">年龄</label></nobr> 
</div> 
<div> 
<div>18-25岁</div> 
<div>26-32岁</div> 
</div> 
</div> 
</div> 
<div> 
<div> 
<div> 
<nobr><label id="text3">所在地</label></nobr> 
</div> 
<div> 
<div>上海</div> 
<div>浙江</div> 
<div>福建</div> 
<div>广东</div> 
</div> 
</div> 
</div> 
<div><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='';" /></div> 
<div><img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200512/28112.jpg" width="100" height="24" alt="search" border="0" onclick="go_search()" /></div> 
</form> 
</div> 
</body> 
</html>

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

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

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

加载全部内容