用javascript实现select的美化

作者：jxdawei 来源：蓝色经典时间：2007-05-11 16:50:00　

论坛经常有人会问到用CSS如何美化Select标签，其实但凡你看到很酷的都是用javascript来实现的。昨天试着做了一下，基本实现的初级功能。拿出来和大家一起分享一下。
先可以看一下：预览效果

功能需求

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>

实现思路

第一步：将表单中的select隐藏起来。
为什么？很简单，因为这家伙太顽固了，用css根本搞不出来你想要的。所以把它杀掉。
第二步：用脚本找到select标签在网页上的绝对位置。
我们在那个位置上用DIV标签做个假的、好看点的来当他的替身。
第三步：用脚本把select标签中的值读出来。
虽然藏起来了，但它里边的options我们还有用呢，统统取过来。
第四步：当用户点击select标签的替身，也就是div的时候。我们再用一个div浮在上一个div的下边，这个就是options的替身了。

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

准备工作

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

运行代码框
<!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=gb2312" /> <meta http-equiv="Content-Language" content="zh-CN" /> <title>用javascript美化Select</title> <script type="text/javascript" src="https://img.aspxhome.com/fileimg/2007/04/4687/select.js"></script> <style type="text/css"> select{width:200px;height:20px;}</style> </head> <body> <h1>用javascript模拟select达到美化效果</h1><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> <script type="text/javascript"> loadSelect(document.f.province); </script> <p> <a href="http://www.iwcn.net">作者博客</a> </p> </body></html>

2 下一页

标签：select,美化,javascript

投稿

用javascript实现select的美化

猜你喜欢

ASP程序中使用断开的数据记录集的代码

使用面向对象的技术创建高级JavaScript Web 应用程序

常用CSS缩写语法总结章

MySQL数据库锁机制的相关原理简介

改善登陆界面的用户体验: 自动聚焦表单

asp中最新新闻显示new图片的实现代码

表单制作方式大比拼

用ASP编程实现网络内容快速查找

asp使用 sql_dmo 添加新数据库代码

asp单主键高效通用分页存储过程

用XMlhttp生成html页面

Mysql常用命令行大全

linux下默认安装mysql数据库

ASP 正则表达式常用的几种方法(execute、test、replace)

浅析MySQL数据库授权原则

按钮上的内容

Mootools 1.2教程(15)——滚动条（Slider）

XMLHTTP中setRequestHeader的参数问题

phpmyadmin 数据导入导出问题

10条改进你的CSS代码的方法