选择下拉插件-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
相关推荐
-
tween.js 中文使用指南 插件应用
2018-1-6
-
jQuery Lightbox效果插件Boxer 插件应用
2017-12-12
-
轴动效果插件,类似Github404页面 插件应用
2018-10-31
-
一种自动生成网页骨架屏的方式 插件应用
2018-10-30
-
轮播图FlexSlider插件使用方法及参数 插件应用
2017-6-3
-
省市区三级菜单联动插件 插件应用
2018-1-1
-
移动端常用alert、confirm、toast等弹窗插件,兼容 jQueryZepto 插件应用
2017-12-10
-
jQuery artDialog对话框插件API 插件应用
2017-6-23
-
THREE.js 入门 插件应用
2017-5-4
-
jQuery Transit 过渡效果插件 插件应用
2017-5-17