你的位置:首页 > Java教程

[Java教程]div模拟实现select下拉框


 1 <!DOCTYPE html> 2 <html> 3  4 <head> 5   <title></title> 6   <style type="text/css"> 7    #gridComboBox { 8     background: #fff; 9     border: 1px solid #2d78f4;10     border-radius: 2px;11     -moz-box-shadow: inset 0 0 4px #06c;12     -webkit-box-shadow: inset 0 0 4px #06c;13     box-shadow: inset 0 0 4px #06c;14   }15   </style>16 </head>17 18 <body>19   <input onclick="doClick(this,'ddd(aa/bb/cc/erererer/dfdfdfdfdfdfdfdfdfdfdfdfdf/ejjejrjerjer//erererer ////////)eee')" />20   <input onclick="doClick(this,'ddd(aa/bb/cc/erererer/dfdfdfdfdfdfdfdfdfdfdfdfdf/ejjejrjerjer//erererer ////////)eee')" style='width: 300px;' />21   <p><b>Needed Properties:</b> sender.offsetTop & sender.offsetLeft & sender.offsetHeight</p>22 </body>23 24 </html>25 <script type="text/javascript">26 27 function delGridComboBox() { // 删除弹出框28   var divContainer = document.getElementById('gridComboBox');29   if (divContainer) {30     divContainer.parentNode.removeChild(divContainer);31   }32 }33 34 function doClick(sender, str) {//str='ddd(aa/bb/cc/erererer/dfdfdfdfdfdfdfdfdfdfdfdfdf/ejjejrjerjer//erererer ////////)eee' 只取()得内容/分割做为数据源35 36   delGridComboBox();37 38   // console.log(sender);39   // for(var i in sender) 40   // {41   //   console.log(i+"|"+sender[i]);42   // }43 44  45   var re = /[^\)\(]*/g //取出()中的内容作为下拉数据源46   var fit = str.match(re);47   var fmt = fit[2].split('/');48 49   var divContainer = document.createElement('div');50   divContainer.style.width = sender.clientWidth + 2 + "px";51   divContainer.style.overflow = "hidden";52   divContainer.style.position = 'absolute'; 53   divContainer.style.top = sender.offsetTop + sender.offsetHeight + 'px';54   divContainer.style.left = sender.offsetLeft + 'px';55   divContainer.style.zIndex = 999;56   divContainer.id = "gridComboBox";57 58   for (var i = 0; i < fmt.length; i++) {   59 60     console.log('fmt[i]>>', fmt[i]);61     var txt = document.createElement('div'); 62     txt.innerHTML = fmt[i];63     txt.title = txt.innerHTML;64     txt.style.margin = 3+'px';    65     txt.addEventListener('mouseover', function changeBg(event) {66       event.target.style.fontWeight = 'bold';67       event.target.style.color = 'white';68       event.target.style.backgroundColor = '#2d78f4';69     }, false);70     txt.addEventListener('mouseout', function unChangeBg(event) {71       event.target.style.fontWeight = 'normal';72       event.target.style.color = 'black';73       event.target.style.backgroundColor = 'white';74     }, false);75     txt.onclick = function(subSender) {76       sender.value = subSender.target.innerText;77       delGridComboBox();78     };79     divContainer.appendChild(txt);80   };81   82   document.body.appendChild(divContainer);83 };84 </script>

原文地址:  http://www.cnblogs.com/xuejianxiyang/p/4959912.html