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>
在线预览：http://jsbin.com/apanos/3/
posted on 2013-05-07 22:23 仙梦之飘阅读(233) 评论(0) 编辑收藏举报