js模拟select下拉菜单控件的代码_javascript技巧

复制代码 代码如下:

 
 
 
 
 
 
   
 
  

          

            

                

select选择

                
                

                    
• jq的select模拟1

                    
• jq的select模拟2

                    
• jq的select模拟3

                

            

            

                

select选择2

                
                

                    
• jq的select模拟11

                    
• jq的select模拟22

                    
• jq的select模拟31

                

            

        

 

   <script><br><br> window.onload=function(){<BR> var oflink = document.getElementById('sel');<BR> var aDt = oflink.getElementsByTagName('dt');<BR> var aUl = oflink.getElementsByTagName('ul');<BR> var aH3= oflink.getElementsByTagName('h3');<BR> for(var i=0;i<aDt.length;i++){<BR> aDt[i].index = i;<BR> aDt[i].onclick = function(ev){<BR> var ev = ev || window.event;<BR> var This = this;<BR> for(var i=0;i<aUl.length;i++){<BR> aUl[i].style.display = 'none';<BR> }<BR> aUl[this.index].style.display = 'block';<BR> document.onclick = function(){<BR> aUl[This.index].style.display = 'none';<BR> };<BR> ev.cancelBubble = true;<br><br> };<BR> }<BR> for(var i=0;i<aUl.length;i++){<br><br> aUl[i].index = i;<br><br> (function(ul){<br><br> var iLi = ul.getElementsByTagName('li');<br><br> for(var i=0;i<iLi.length;i++){<BR> iLi[i].onmouseover = function(){<BR> this.className = 'hover';<BR> };<BR> iLi[i].onmouseout = function(){<BR> this.className = '';<BR> };<BR> iLi[i].onclick = function(ev){<BR> var ev = ev || window.event;<BR> aH3[this.parentNode.index].innerHTML = this.innerHTML;<BR> ev.cancelBubble = true;<BR> this.parentNode.style.display = 'none';<BR> };<BR> }<br><br> })(aUl[i]);<BR> }<br><br> }<BR> </script>