用 ul 和 li 模擬select控件

時間 2019-12-08

標籤模擬 select 控件简体版

原文原文鏈接

 
    <!doctype html> 
  
    <html lang="en"> 
  
    <head> 
  
    <meta charset="UTF-8"> 
  
    <style> 
  
    #ul{ 
  
    　　list-style:none; 
  
   　　 width:150px; 
  
   　　 border:1px solid #000; 
  
    　　display:none; 
  
    } 
  
    li a{ 
  
    　　text-decoration:none;  
  
    　　color:#000; 
  
    } 
  
    </style> 
  
    </head> 
  
    <body> 
  
    <input id="ipt" type="text" placeholder="點擊測試"/> 
  
    <ul id="ul"> 
  
    　　<li><a href="javascript:;">測試1</a></li> 
  
    　　<li><a href="javascript:;">測試2</a></li> 
  
    　　<li><a href="javascript:;">測試3</a></li> 
  
    </ul> 
  
    <script> 
  
    var ipt=document.getElementById('ipt');  
  
    var ul=document.getElementById('ul');  
  
    var li=ul.children;  
  
    ipt.onfocus=function(){ 
  
    　　ul.style.display='block'; 
  
    }; 
  
    ipt.onblur=function(){/*點擊li(失去焦點)時觸發*/ 
  
    　　setTimeout(function(){ 
  
    　　　　ul.style.display='none';  
  
    　　},200);/*停留的時間若是太短，onclick事件沒法執行，過長用戶體驗很差*/ 
  
    } 
  
    //註冊點擊事件 
  
    for(var i=0;i<li.length;i++){ 
  
    　　li[i].onclick=function(){ 
  
    　　　　ipt.value=this.innerText;  
  
    　　}; 
  
    } 
  
    </script> 
  
    </body> 
  
    </html>

相關標籤/搜索