js模拟select
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 5 <meta charset=utf-8 /> 6 <title>js模拟select</title> 7 </head> 8 <style> 9 *{ margin:0; padding:0;} 10 li{ list-style:none;} 11 body{ font:12px "宋体"; color:#666;} 12 .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} 13 .select_down dt{float:left;width:134px;position:relative;margin-right:5px;display:inline;} 14 .select_down h3{color: #919191; font-size:12px;font-weight: normal;border:1px solid #e5e5e5;height:18px;background:#fbfbfb;line-height: 18px;text-indent:8px;} 15 .select_down ul{width: 132px;border: 1px solid #e5e5e5;background:#fbfbfb;position: absolute;top: 18px;left: 0; 16 z-index: 1;text-indent:8px;display:none;} 17 .select_down ul li{height:22px;line-height: 22px;cursor:pointer;} 18 .select_down ul li.hover{background:#f2f2f2;} 19 .select_down dt a{background:url('http://images.cnblogs.com/cnblogs_com/hxh-hua/478335/o_select.jpg') no-repeat;position:absolute;width:18px;height:18px;top:1px;right:1px; } 20 </style> 21 <body> 22 <div class="select_down" id="sel"> 23 <dl> 24 <dt> 25 <h3>select选择</h3> 26 <a href="javascript:;"></a> 27 <ul> 28 <li>jq的select模拟1</li> 29 <li>jq的select模拟2</li> 30 <li>jq的select模拟3</li> 31 </ul> 32 </dt> 33 <dt> 34 <h3>select选择2</h3> 35 <a href="javascript:;"></a> 36 <ul> 37 <li>jq的select模拟11</li> 38 <li>jq的select模拟22</li> 39 <li>jq的select模拟31</li> 40 </ul> 41 </dt> 42 43 </dl> 44 </div> 45 <script> 46 47 window.onload=function(){ 48 var oflink = document.getElementById('sel'); 49 var aDt = oflink.getElementsByTagName('dt'); 50 var aUl = oflink.getElementsByTagName('ul'); 51 var aH3= oflink.getElementsByTagName('h3'); 52 for(var i=0;i<aDt.length;i++){ 53 aDt[i].index = i; 54 aDt[i].onclick = function(ev){ 55 var ev = ev || window.event; 56 var This = this; 57 for(var i=0;i<aUl.length;i++){ 58 aUl[i].style.display = 'none'; 59 } 60 aUl[this.index].style.display = 'block'; 61 document.onclick = function(){ 62 aUl[This.index].style.display = 'none'; 63 }; 64 ev.cancelBubble = true; 65 66 }; 67 } 68 for(var i=0;i<aUl.length;i++){ 69 70 aUl[i].index = i; 71 72 (function(ul){ 73 74 var iLi = ul.getElementsByTagName('li'); 75 76 for(var i=0;i<iLi.length;i++){ 77 iLi[i].onmouseover = function(){ 78 this.className = 'hover'; 79 }; 80 iLi[i].onmouseout = function(){ 81 this.className = ''; 82 }; 83 iLi[i].onclick = function(ev){ 84 var ev = ev || window.event; 85 aH3[this.parentNode.index].innerHTML = this.innerHTML; 86 ev.cancelBubble = true; 87 this.parentNode.style.display = 'none'; 88 }; 89 } 90 91 })(aUl[i]); 92 } 93 94 } 95 96 </script> 97 98 99 </body> 100 </html>
关注web前端