javascript模拟select实现代码

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

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

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

DIV+CSS+JS仿下拉表单

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";
}

* {
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;
}

测试一 测试二 测试三 测试四 测试五 测试六

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

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

浏览器默认样式

select1select2select3select4

js模拟select,样式主要参照IE8与Firefox。

• select1

  select2

  select3

  select4

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

//

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

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

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

.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 */

/* 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.opacity0){
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= 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 */

选择类别

类别1

类别2

类别3

年龄

18-25岁

26-32岁

所在地

上海

浙江

福建

广东

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

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

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