javascript美化下拉框js
var childCreate = false;function Offset(e) {//取标签的绝对位置var t = e.offsetTop;var l = e.offsetLeft;var w = e.offsetWidth;var h = e.offsetHeight - 2;while ( e = e.offsetParent) {t += e.offsetTop;l += e.offsetLeft;}return {top : t,left : l,width : w,height : h}}function loadselect(obj) {//第一步：取得select所在的位置var offset = Offset(obj);//第二步：将真的select隐藏obj.style.display = "none";//第三步：虚拟一个div出来代替selectvar iDiv = document.createElement("div");iDiv.id = "selectof" + obj.name;iDiv.style.position = "absolute";iDiv.style.width = offset.width + "px";iDiv.style.height = offset.height + "px";iDiv.style.top = offset.top + 4 + "px";iDiv.style.left = offset.left + 4 + "px";iDiv.style.background = "url('test.png') no-repeat right -6px";iDiv.style.border = "1px solid #ccc";iDiv.style.fontSize = "12px";iDiv.style.lineHeight = offset.height + "px";iDiv.style.textIndent = "4px";document.body.appendChild(iDiv);//第四步：将select中默认的选项显示出来var tValue = obj.options[obj.selectedIndex].innerHTML;iDiv.innerHTML = tValue;//第五步：模拟鼠标点击iDiv.style.background = "url('images/select.jpg') no-repeat right -2px";iDiv.onclick = function() {//鼠标点击if (document.getElementById("selectchild" + obj.name)) {//判断是否创建过divif (childCreate) {//判断当前的下拉是不是打开状态，如果是打开的就关闭掉。是关闭的就打开。document.getElementById("selectchild" + obj.name).style.display = "none";childCreate = false;} else {document.getElementById("selectchild" + obj.name).style.display = "";childCreate = true;}} else {//初始一个div放在上一个div下边，当options的替身。var cDiv = document.createElement("div");cDiv.id = "selectchild" + obj.name;cDiv.style.position = "absolute";cDiv.style.width = offset.width + "px";cDiv.style.height = obj.options.length * 20 + "px";cDiv.style.top = (offset.top + offset.height + 2) + 4+"px";cDiv.style.left = offset.left + 4+ "px";cDiv.style.background = "#f7f7f7";cDiv.style.border = "1px solid silver";var uUl = document.createElement("ul");uUl.id = "uUlchild" + obj.name;uUl.style.listStyle = "none";uUl.style.margin = "0";uUl.style.padding = "0";uUl.style.fontSize = "12px";cDiv.appendChild(uUl);document.body.appendChild(cDiv);childCreate = true;for (var i = 0; i < obj.options.length; i++) {//将原始的select标签中的options添加到li中var lLi = document.createElement("li");lLi.id = obj.options[i].value;lLi.style.textIndent = "4px";lLi.style.height = "20px";lLi.style.lineHeight = "20px";lLi.innerHTML = obj.options[i].innerHTML;uUl.appendChild(lLi);}var liObj = document.getElementById("uUlchild" + obj.name).getElementsByTagName("li");for (var j = 0; j < obj.options.length; j++) {//为li标签添加鼠标事件liObj[j].onmouseover = function() {this.style.background = "gray";this.style.color = "white";}liObj[j].onmouseout = function() {this.style.background = "white";this.style.color = "black";}liObj[j].onclick = function() {//做两件事情，一是将用户选择的保存到原始select标签中，要不做的再好看表单递交后也获取不到select的值了。obj.options.length = 0;obj.options[0] = new Option(this.innerHTML, this.id);//同时我们把下拉的关闭掉。document.getElementById("selectchild" + obj.name).style.display = "none";childCreate = false;iDiv.innerHTML = this.innerHTML;}}}}}document.body.onload = function (){var selects = document.getElementsByTagName("select");for(var i = 0 ; i < selects.length;i++){loadselect(selects[i]);}}?