在html中select总是那么不好看，秀多时候我们想对select下拉菜单进行美化都要用九牛二虎之力才可以做出来，但是可能还不兼容，下面我来介绍一个jquery的niceForm插件来美化select控件。
jquery+%CF%C2%C0%AD%B2%CB%B5%A5/" target="_blank">jquery 下拉菜单插件
使用方法
| 代码如下 | 复制代码 |
$(function(){
//调用方式
$("select").niceForm({
eventType:'click', //默认为单击事件
change:function(){} //下拉菜单发生change事件时触发的回调函数
}); }); |
html代码如下定义：
（html部分和平常写的方式一样，其中data-width用来自定义宽度）
单选菜单
| 代码如下 | 复制代码 |
<select name="select" id="select0" data-width="100">
<option value="0">--请选择--</option>
<option value="1">陕西</option>
<option value="2" selected="selected" >广东</option>
<option value="3">北京</option>
<option value="4">四川</option>
<option value="5">山东</option>
<option value="6">河南</option>
</select> |
多选菜单
| 代码如下 | 复制代码 |
<select name="select1" id="select1" multiple="multiple">
<option value="0">选择省份</option>
<option value="1">陕西</option>
<option value="2" selected="selected" >广东</option>
<option value="3" selected="selected" >北京</option>
<option value="4">四川</option>
<option value="5">山东</option>
<option value="6">河南</option>
</select> |
实例
| 代码如下 | 复制代码 |
<!doctype html>
<html>
<head>
<title>无标题文档</title>
<link rel="stylesheet" href="css/jquery.niceForm.css" type="text/css">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.niceForm.js"></script>
<style type="text/css">
body, td, th {
font-size: 12px;
}
</style>
<script type="text/javascript">
$(function(){
$("select").niceForm({
eventType:'click',
change:function(){}
});
});
</script>
</head> <body>
//下拉框美化 <br>
<br>
<br>
<p>单选菜单</p>
<select name="select" id="select0" data-width="100">
<option value="0">--请选择--</option>
<option value="1">陕西</option>
<option value="2" selected="selected" >广东</option>
<option value="3">北京</option>
<option value="4">四川</option>
<option value="5">山东</option>
<option value="6">河南</option>
</select> <select id="visitLimit" name="blogUserBean.visitLimit" class="select" data-width="100">
<option value="">--请选择--</option>
<option value="VISIT_LIMIT_CLASS">仅班级可见</option>
<option value="VISIT_LIMIT_ALL">所有人可见</option>
<option value="VISIT_LIMIT_FRIEND">好友可见</option>
<option value="VISIT_LIMIT_SELF">仅自己可见</option>
</select>
<br>
<br>
<br>
<br>
<p>多选菜单</p>
<select name="select1" id="select1" multiple="multiple">
<option value="0">选择省份</option>
<option value="1">陕西</option>
<option value="2" selected="selected" >广东</option>
<option value="3" selected="selected" >北京</option>
<option value="4">四川</option>
<option value="5">山东</option>
<option value="6">河南</option>
</select>
</body>
</html> |
友情提示，实例中的jquery与nicform插件大家要到官方下载之后才可以，本文章只提供实例不提供效果。
