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> <select id="visitLimit" name="blogUserBean.visitLimit" class="select" data-width="100"> |
|
友情提示，实例中的jquery与nicform插件大家要到官方下载之后才可以，本文章只提供实例不提供效果。