javascript美化下拉框js

Js代码  

1. var childCreate = false;   
2. function Offset(e) {   
3.     //取标签的绝对位置   
4.     var t = e.offsetTop;   
5.     var l = e.offsetLeft;   
6.     var w = e.offsetWidth;   
7.     var h = e.offsetHeight - 2;   
8.     while ( e = e.offsetParent) {   
9.         t += e.offsetTop;   
10.         l += e.offsetLeft;   
11.     }   
12.     return {   
13.         top : t,   
14.         left : l,   
15.         width : w,   
16.         height : h   
17.     }   
18. }   
19.   
20. function loadselect(obj) {   
21.     //第一步：取得select所在的位置   
22.     var offset = Offset(obj);   
23.     //第二步：将真的select隐藏   
24.     obj.style.display = "none";   
25.     //第三步：虚拟一个div出来代替select   
26.     var iDiv = document.createElement("div");   
27.     iDiv.id = "selectof" + obj.name;   
28.     iDiv.style.position = "absolute";   
29.     iDiv.style.width = offset.width + "px";   
30.     iDiv.style.height = offset.height + "px";   
31.     iDiv.style.top = offset.top + 4 + "px";   
32.     iDiv.style.left = offset.left + 4 + "px";   
33.     iDiv.style.background = "url('test.png') no-repeat right -6px";   
34.     iDiv.style.border = "1px solid #ccc";   
35.     iDiv.style.fontSize = "12px";   
36.     iDiv.style.lineHeight = offset.height + "px";   
37.     iDiv.style.textIndent = "4px";   
38.     document.body.appendChild(iDiv);   
39.     //第四步：将select中默认的选项显示出来   
40.     var tValue = obj.options[obj.selectedIndex].innerHTML;   
41.     iDiv.innerHTML = tValue;   
42.     //第五步：模拟鼠标点击   
43.     iDiv.style.background = "url('images/select.jpg') no-repeat right -2px";   
44.     iDiv.onclick = function() {//鼠标点击   
45.         if (document.getElementById("selectchild" + obj.name)) {   
46.             //判断是否创建过div   
47.             if (childCreate) {   
48.                 //判断当前的下拉是不是打开状态，如果是打开的就关闭掉。是关闭的就打开。   
49.                 document.getElementById("selectchild" + obj.name).style.display = "none";   
50.                 childCreate = false;   
51.             } else {   
52.                 document.getElementById("selectchild" + obj.name).style.display = "";   
53.                 childCreate = true;   
54.             }   
55.         } else {   
56.             //初始一个div放在上一个div下边，当options的替身。   
57.             var cDiv = document.createElement("div");   
58.             cDiv.id = "selectchild" + obj.name;   
59.             cDiv.style.position = "absolute";   
60.             cDiv.style.width = offset.width + "px";   
61.             cDiv.style.height = obj.options.length * 20 + "px";   
62.             cDiv.style.top = (offset.top + offset.height + 2) + 4+"px";   
63.             cDiv.style.left = offset.left + 4+ "px";   
64.             cDiv.style.background = "#f7f7f7";   
65.             cDiv.style.border = "1px solid silver";   
66.             var uUl = document.createElement("ul");   
67.             uUl.id = "uUlchild" + obj.name;   
68.             uUl.style.listStyle = "none";   
69.             uUl.style.margin = "0";   
70.             uUl.style.padding = "0";   
71.             uUl.style.fontSize = "12px";   
72.             cDiv.appendChild(uUl);   
73.             document.body.appendChild(cDiv);   
74.             childCreate = true;   
75.             for (var i = 0; i < obj.options.length; i++) {   
76.                 //将原始的select标签中的options添加到li中   
77.                 var lLi = document.createElement("li");   
78.                 lLi.id = obj.options[i].value;   
79.                 lLi.style.textIndent = "4px";   
80.                 lLi.style.height = "20px";   
81.                 lLi.style.lineHeight = "20px";   
82.                 lLi.innerHTML = obj.options[i].innerHTML;   
83.                 uUl.appendChild(lLi);   
84.             }   
85.             var liObj = document.getElementById("uUlchild" + obj.name).getElementsByTagName("li");   
86.             for (var j = 0; j < obj.options.length; j++) {   
87.                 //为li标签添加鼠标事件   
88.                 liObj[j].onmouseover = function() {   
89.                     this.style.background = "gray";   
90.                     this.style.color = "white";   
91.                 }   
92.                 liObj[j].onmouseout = function() {   
93.                     this.style.background = "white";   
94.                     this.style.color = "black";   
95.                 }   
96.                 liObj[j].onclick = function() {   
97.                     //做两件事情，一是将用户选择的保存到原始select标签中，要不做的再好看表单递交后也获取不到select的值了。   
98.                     obj.options.length = 0;   
99.                     obj.options[0] = new Option(this.innerHTML, this.id);   
100.                     //同时我们把下拉的关闭掉。   
101.                     document.getElementById("selectchild" + obj.name).style.display = "none";   
102.                     childCreate = false;   
103.                     iDiv.innerHTML = this.innerHTML;   
104.                 }   
105.             }   
106.         }   
107.     }   
108. }   
109. document.body.onload = function (){   
110.     var selects = document.getElementsByTagName("select");   
111.     for(var i = 0 ; i < selects.length;i++){   
112.         loadselect(selects[i]);   
113.     }   
114. }