select组件 

 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>

 

posted @ 2015-12-18 20:08  agosto  阅读(150)  评论(0)    收藏  举报