1、想好要把select美化成什么样子，并准备好相应的图片。

　　2、写好一个普通的表单递交页面，注意给select定义基本的CSS样式、在头部添加了调用js文件的代码、在body中添加了调用函数的脚本。

　　实现思路

　　第一步：将表单中的select隐藏起来。

　　第二步：用脚本找到select标签在网页上的绝对位置。

　　第三步：用脚本把select标签中的值读出来。

　　第四步：当用户点击select标签的替身，也就是div的时候。我们再用一个div浮在上一个div的下边，这个就是options的替身了。

　　功能需求

　　1、调用要方便，做好之后应该像这样：

以下是引用片段： function loadSelect(selectobj){ //传入一个select对象就能将他的样式美化 }

　　2、不改变原有表单项，表单的页面代码不去破坏：

以下是引用片段： <form name="f" onsubmit="getResult();">     <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>

　　编写javascript

以下是引用片段： <script type="text/javascript" src="select.js"></script>

　　新建一个js文件并保存为select.js，剩下的工作全部在这个js中去完成。

　　函数名：loadSelect(obj);

　　参数：select对象

　　相关函数：

以下是引用片段： //取标签的绝对位置 {     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     } }

　　第一步：把select的绝对位置记录下来。一会替身上来就知道应该站那里了。

　　var offset=Offset(obj);

　　//这里解释一下Offset是一个函数，用来获取对象的绝对位置。写在loadSelect()函数外边的。它有四个属性分别是top/left/width/height。

　　第二步：将select隐藏。

　　obj.style.display="none";