原生JS实现模拟select下拉框
<!DOCTYPE html>
<html>
<head>
<!--<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>-->
<meta charset=utf-8 />
<title>js模拟select</title>
</head>
<style>
*{ margin:0; padding:0;}
li{ list-style:none;}
body{ font:12px "宋体"; color:#666;}
/* .select_down{ margin:100px auto; position:relative; width:600px; min-height:200px; height:auto!important; height:200px; border:1px solid #ccc; padding:20px; border-radius: 8px;} */
.identityOptionsBox{position:relative;}
.identityOptionsBox p{float:left;border:1px solid #ccc;width:278px;text-indent:10px;font-size:13px;height:23px;line-height:23px;}
.identityOptionsBox span{position:absolute;right: 12px;top: 3px;background:url("zh_CN/default/images/combo_select_dhx_blue.gif") no-repeat;cursor: pointer;height: 20px;width: 18px;}
.identityOptions{width: 278px;position: absolute;left: 95px;top: 24px;background: #fff;border:1px solid #ccc;border-top:0}
.identityOptions li{text-indent:10px;}
</style>
<body>
<div id="identityselect">
<div class="identityOptionsBox">
<p>select选择</p><span></span>
<ul class="identityOptions" style="display:none;">
<li>身份证</li>
<li>军官证</li>
<li>警官证</li>
<li>士兵军人证</li>
<li>护照</li>
<li>港澳台居民通行证</li>
<li>户口簿</li>
<li>台湾居民往来通行证</li>
<li>其他</li>
</ul>
</div>
<div>
<h3>select选择2</h3><span></span>
<ul>
<li>jq的select模拟11</li>
<li>jq的select模拟22</li>
<li>jq的select模拟31</li>
</ul>
</div>
</div>
<script>
window.onload=function(){
var oflink = document.getElementById('identityselect');
var adiv = oflink.getElementsByTagName('div');
var aUl = oflink.getElementsByTagName('ul');
var ap= oflink.getElementsByTagName('p');
var aspan= oflink.getElementsByTagName('span');
for(var i=0;i<adiv.length;i++){
adiv[i].index = i;
adiv[i].onclick = function(ev){
var ev = ev || window.event;
var This = this;
for(var i=0;i<aUl.length;i++){
aUl[i].style.display = 'none';
}
aUl[this.index].style.display = 'block';
document.onclick = function(){
aUl[This.index].style.display = 'none';
};
ev.cancelBubble = true;
};
}
for(var i=0;i<aUl.length;i++){
aUl[i].index = i;
(function(ul){
var iLi = ul.getElementsByTagName('li');
for(var i=0;i<iLi.length;i++){
iLi[i].onmouseover = function(){
this.className = 'hover';
};
iLi[i].onmouseout = function(){
this.className = '';
};
iLi[i].onclick = function(ev){
var ev = ev || window.event;
ap[this.parentNode.index].innerHTML = this.innerHTML;
ev.cancelBubble = true;
this.parentNode.style.display = 'none';
};
}
})(aUl[i]);
}
}
</script>
</body>
</html>
