<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <title>用javascript美化Select</title> <script type="text/javascript"> 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出来代替select var 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 + "px"; iDiv.style.left = offset.left + "px"; iDiv.style.background = "url(/articleimg/2007/04/4687/icon_select.gif) no-repeat right 4px"; iDiv.style.border = "1px solid #3366ff"; 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.onmouseover = function() {//鼠标移到 iDiv.style.background = "url(/articleimg/2007/04/4687/icon_select_focus.gif) no-repeat right 4px"; } iDiv.onmouseout = function() {//鼠标移走 iDiv.style.background = "url(/articleimg/2007/04/4687/icon_select.gif) no-repeat right 4px"; } iDiv.onclick = function() {//鼠标点击 if (document.getElementById("selectchild" + obj.name)) { //判断是否创建过div if (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) + "px"; cDiv.style.left = offset.left + "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; } } } } } </script> <style type="text/css"> select { width: 200px; height: 20px; } </style> </head> <body> <form name="f"> <fieldset> <legend> 用户注册 </legend> <div> <label for="username">帐号</label> <input type="text" id="username" name="username" /> </div> <div> <label for="pwd">密码</label> <input type="password" name="pwd" id="pwd" /> </div> <div> <label for="province">省份</label> <select id="province" name="province"> <option value="10">江西</option> <option value="11">福建</option> <option value="12">广东</option> <option value="13">浙江</option> </select> </div> </fieldset> <input type="submit" value="提交" name="btnSub" /> </form> <script type="text/javascript"> loadSelect(document.f.province); </script> </body></html>?