用javascript实现select的美化的方法_表单特效

论坛经常有人会问到用CSS如何美化Select标签，其实但凡你看到很酷的都是用javascript来实现的。昨天试着做了一下，基本实现的初级功能。拿出来和大家一起分享一下。先可以看一下预览效果：http://www.iwcn.net/demo/select。
【功能需求】
1、调用要方便，做好之后应该像这样：

复制代码 代码如下:

function loadSelect(selectobj){ 
//传入一个select对象就能将他的样式美化 
} 

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

复制代码 代码如下:

 
    

 
        

用户注册

 
        

 
            帐号 
             
        

 
        

 
            密码 
             
        

 
        

 
            省份 
             
                江西 
                福建 
                广东 
                浙江 
             
        

 
    

 
     

 

【实现思路】

第一步：将表单中的select隐藏起来。
为什么？很简单，因为这家伙太顽固了，用css根本搞不出来你想要的。所以把它杀掉。

第二步：用脚本找到select标签在网页上的绝对位置。
我们在那个位置上用DIV标签做个假的、好看点的来当他的替身。

第三步：用脚本把select标签中的值读出来。
虽然藏起来了，但它里边的options我们还有用呢，统统取过来。

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

大致上就是这样了，接下来我们一步一步去实现它！

【准备工作】
1、想好你要把select美化成什么样子，并准备好相应的图片。我准备了两张小图，就是下拉箭头1和下拉箭头2，1是默认样式，2是鼠标移过来的样式。
2、写好一个普通的表单递交页面，比如下边这个。注意我给select定义了基本的CSS样式、在头部添加了调用js文件的代码、在body中添加了调用函数的脚本。

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta http-equiv="Content-Language" content="zh-CN"> <title></title>