选择下拉插件-Dropdown.js
简介
Dropdown是面向PC端的基于jQuery开发的轻量级下拉框插件,支持key/value搜索,有token和select两种模式。
兼容
- Internet Explorer 8+
- Chrome for PC
- Safari for PC
- Firefox for PC
在线演示及下载
功能
- 支持 select 和 token 两种模式
- 支持 optgroup 分组
- 保留原生 select 的键盘操作
- 数据源可以直接通过接口 data 注入,也可以直接渲染 select>option ,由插件自动转换。
- 插件同步 select 和 ul>li 标签,便于表单字段提交及前端校验
选项
参数
名称 | 描述 | 类型 | 默认 |
---|---|---|---|
readOnly | 是否只读 | Boolean | false |
limitCount | 选择上限 | Number | Infinity |
input | 搜索框模板 | HTML | <input type="text" maxLength="20" placeholder="搜索关键词或ID"> |
data | 数据源 | Array | [] |
searchable | 是否可开启搜索 | Boolean | true |
searchNoData | 无数据模板 | HTML | <li style="color:#ddd">查无数据,换个词儿试试 /(ㄒoㄒ)/~~</li> |
choice | 选择后回调函数 | Function | function(){} |
方法
changeStatus(status)
参数 | 类型 | 描述 |
---|---|---|
status | String | 支持readonly 或disabled ,不传则取消readonly/disabled |
return | undefined |
var dropdown = $('selector').dropdown(options).data('dropdown'); dropdown.changeStatus('readonly') // readonly dropdown.changeStatus('disabled') // disabled dropdown.changeStatus() // cancel
destroy()
参数 | 类型 | 描述 |
---|---|---|
status | String | 支持readonly 或disabled ,不传则取消readonly/disabled |
return | undefined |
var dropdown = $('selector').dropdown(options).data('dropdown'); dropdown.destroy();
使用方法
引入
<script src="http://cdn.bootcss.com/jquery/1.8.1/jquery.js"></script> <link rel="stylesheet" type="text/css" href="./jquery.dropdown.css"> <script src="./jquery.dropdown.js"></script>
HTML
JavaScript
$('.dropdown-mul-1').dropdown({ limitCount: 40, multipleMode: 'label', choice: function () { console.log(arguments,this); } });
github地址:https://github.com/Janking/dropdown
相关推荐
-
jQuery侧边栏插件-Simpler Sidebar 插件应用
2017-12-25
-
Draggabilly中文文档 插件应用
2017-12-11
-
jQuery响应式图片画廊插件S Gallery 插件应用
2017-12-12
-
jQuery cxCalendar 日期选择器 插件应用
2017-5-18
-
BetterScroll:在移动端滚动场景的应用 插件应用
2017-12-11
-
图像延迟加载库Echo.js 插件应用
2017-6-23
-
2018年最佳JavaScript数据可视化和图表库 插件应用
2018-10-30
-
如何写一个日历组件 插件应用
2017-12-10
-
jQuery全屏滚动插件-pagepiling.js 插件应用
2017-12-25
-
jQuery返回顶部插件-toTop 插件应用
2017-12-25