1 select.css
2
3 *{padding:0;margin:0;}
4 .box{position: relative;width: 100px;}
5 ul,li{list-style: none;background: #eee;}
6 .box span{display:block;width: 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{width: 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>
