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
原标题:div模拟实现select下拉框
关键词:div