1 select.css 2 3 *{padding:0;margin:0;} 4 .box{position: relative; 100px;} 5 ul,li{list-style: none;background: #eee;} 6 .box span{display:block; 100px;height: 30px;line-height:30px;text-align: center; border:1px solid orange;} 7 .box ul{display: none;position: absolute;left: 0;top:30px;} 8 .box li{ 100px;height: 30px;line-height:30px;text-align: center;} 9 .box li:hover{background: #ccc;} 10 select{display: none;} 11 12 select.js 13 14 (function (){ 15 var addLink=false; 16 window.mySeclect=function (select) 17 { 18 if (!addLink) 19 { 20 addLink=true; 21 var oLink=document.createElement('link'); 22 oLink.href='mySelect.css'; 23 oLink.rel='stylesheet'; 24 var oHead=document.getElementsByTagName('head')[0]; 25 oHead.appendChild(oLink); 26 } 27 28 var oBox=document.createElement('div'); 29 oBox.className='box'; 30 oBox.innerHTML='<span class="span">'+select.options[select.selectedIndex].text+'</span><ul></ul>'; 31 select.parentNode.insertBefore(oBox,select); 32 var oUl=oBox.getElementsByTagName('ul')[0]; 33 34 for (var i=0; i<select.options.length; i++) 35 { 36 var oLi=document.createElement('li'); 37 oLi.innerHTML=select.options[i].text; 38 oUl.appendChild(oLi); 39 } 40 41 42 var oSpan=oBox.getElementsByClassName('span')[0]; 43 44 45 oSpan.onclick=function (ev){ 46 var oEvent=ev || event; 47 oUl.style.display='block'; 48 oEvent.cancelBubble=true; 49 }; 50 var aLi=oUl.children; 51 for (var i=0; i<aLi.length; i++) 52 { 53 (function (index){ 54 aLi[i].onclick=function (){ 55 oSpan.innerHTML=this.innerHTML; 56 select.selectedIndex=index; 57 }; 58 })(i); 59 60 } 61 document.onclick=function (){ 62 oUl.style.display='none'; 63 }; 64 }; 65 })(); 66 67 68 select.html 69 70 71 <!DOCTYPE html> 72 <html> 73 <head> 74 <meta charset="utf-8" /> 75 <title>agosto</title> 76 </head> 77 <script src="mySelect.js"></script> 78 <script> 79 window.onload=function (){ 80 var city=document.getElementById('city'); 81 mySeclect(city); 82 }; 83 </script> 84 <body> 85 <form action="test.html"> 86 <select id="city" name="city"> 87 <option value="bj" data-tit="北京">北京</option> 88 <option value="sh" data-tit="上海">上海</option> 89 <option value="gz" data-tit="广州">广州</option> 90 <option value="hk" data-tit="香港">香港</option> 91 <option value="hz" data-tit="杭州">杭州</option> 92 </select> 93 <input type="submit" value="提交" id="inp" /> 94 </form> 95 </body> 96 </html>