js模拟select下拉选择框,样式主要参照IE8与Firefox,在不改变HTML结构的前提下,可更改其它样式。建议用IE8与FF浏览,可与默认样式进行对比。最近在研究javascript的闭包与继承,写这个小东西找找感觉,不保证应用中能正常使用,仅用于自娱自乐。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js模拟select选择框</title>
<style type="text/css">
*{padding:0; margin:0;}
ul{list-style:none; margin:10px 30px; position:relative;}
ul li{position:relative; width:202px;height:22px; }
.text{width:200px; height:20px; position:absolute; left:0; top:0;border:1px solid #ccc; line-height:20px; font-size:14px; cursor:default;}
.btn{position:absolute;width:17px; height:20px; right:1px; top:1px; display:inline-block; background:url(/jscss/demoimg/201008/btn_thumb_1.jpg) no-repeat;}
.btnhover{background:url(/jscss/demoimg/201008/btn2_thumb.jpg);}
.select{border:1px solid #666;width:199px; height:auto; position:absolute; top:21px; display:none;background:#fff;}
.select p{line-height:16px; font-size:13px; cursor:default; position:relative;}
.select .hover{background:#3399FD;}
</style>
</head>
<body>
<h2>传统样式</h2>
<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>
<h2>Js模拟的select</h2>
<ul>
<li><input type="text" class="text" /><span class="btn" onmousedown="beginSelect(this)"></span></li>
<li class="select">
<p>select1</p>
<p>select2</p>
<p>select3</p>
<p>select4</p>
</li>
</ul>
<script type="text/javascript">
function beginSelect(elem){
if(elem.className == "btn"){
elem.className = "btn btnhover"
elem. = function(){
this.className = "btn"
}
}
var ul = elem.parentNode.parentNode;
var li = ul.getElementsByTagName("li");
var selectArea = li[li.length-1];
if(selectArea.style.display == "block"){
selectArea.style.display = "none";
}
else{
selectArea.style.display = "block";
mouseoverBg(selectArea);
}
}
function mouseoverBg(elem1){
var input = elem1.parentNode.getElementsByTagName("input")[0];
var p = elem1.getElementsByTagName("p");
var pLength = p.length;
for(var i = 0; i < pLength; i++){
p[i]. = showBg;
p[i]. = showBg;
p[i].onclick = postText;
}
function showBg(){
this.className == "hover"?this.className = " ":this.className = "hover";
}
function postText(){
var selected = this.innerHTML;
input.setAttribute("value",selected);
elem1.style.display = "none";
}
}
</script>
</body>
</html>