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>
相关文章：