a lightweight dropdown of jQuery plugins
Dropdown是面向PC端的基于jQuery开发的轻量级下拉框插件,支持key/value搜索,有token和select两种模式。
2018-05-28 version 1.2.2
2017-10-13 version 1.2.0
reset
2017-08-05 version 1.1.7
2017-08-05 version 1.1.6
extendProps
choose
choice(event,data)
,新增第二个入参2017-07-19 version 1.1.5
init
回调函数2017-07-06 version 1.1.4
2017-07-03 version 1.1.3
update
方法点击清除按钮默认提交表单
的行为。2017-06-28 version 1.1.1
IE8
不兼容的问题2017-06-24 version 1.1.0
select
模式下增加一个 全部删除 按钮changeStatus
方法,提供readonly
,disabled
功能destroy
,bindEvent
,unbindEvent
方法2017-06-21 version 1.0.0 上线
select
和 token
两种模式optgroup
分组select
的键盘操作data
注入,也可以直接渲染 select>option
,由插件自动转换。select
和 ul>li
标签,便于表单字段提交及前端校验,程序设计原理如下图所示:
在一些前端渲染的场景,JSON数据是通过AJAX请求的,如果再拼成<option value="yyy">xxx</option>
就有点多余了。
在这种情况下,建议直接将JSON数据转为以下这种格式:
[
{
"id": 1, // value值
"disabled": false, // 是否禁选
"groupName": "分组名",
"groupId": 3,//分组ID
"selected": false, // 是否选中
"name": "Betty Deborah Jackson" // 名称
},
{
"id": 2,
"disabled": false,
"groupName": "分组名",
"groupId": 2,
"selected": false,
"name": "Jason Barbara Clark"
}
// more ...
]
Dropdown 会根据这个JSON来渲染 select > option
名称 | 描述 | 类型 | 默认 |
---|---|---|---|
readOnly | 是否只读 | Boolean | false |
minCount | 下限 | Number | 0 |
minCountErrorMessage | 下限自定義錯誤消息 | String | 最低选择 |
limitCount | 选择上限 | Number | Infinity |
limitCountErrorMessage | 上限的自定义错误消息 | String | 最多可选择<limitCount>个 |
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(){} |
init | 插件初始化后回调函数 | Function | function(){} |
extendProps | 扩展自定义字段 data-* ,字段名必须在data 中存在,否则无效 不建议扩展太多字段,会有性能影响 |
Array | ['prop1','prop2'] |
修改组件状态
参数 | 类型 | 描述 |
---|---|---|
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
动态选择值
参数 | 类型 | 描述 |
---|---|---|
value | String|Array | 需要被选中的值,多个值用数字 ['one','two','three'] |
status | Boolean | 选中或取消,默认为: true |
return | undefined |
var dropdown = $('selector').dropdown(options).data('dropdown');
dropdown.destroy();
更新数据
参数 | 类型 | 描述 |
---|---|---|
data | Array | 需要更新的数据 |
isCover | Boolean | 是否覆盖原有数据,默认不覆盖 |
销毁组件
参数 | 类型 | 描述 |
---|---|---|
return | undefined |
var dropdown = $('selector').dropdown(options).data('dropdown');
dropdown.destroy();
重置
参数 | 类型 | 描述 |
---|---|---|
return | undefined |
var dropdown = $('selector').dropdown(options).data('dropdown');
dropdown.reset();
引入
<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 部分
<div class="dropdown-mul-1">
<!-- PS: select标签需手动设置隐藏 -->
<select style="display:none" name="" id="" multiple placeholder="请选择">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
JavaScript 部分
$('.dropdown-mul-1').dropdown({
limitCount: 40,
multipleMode: 'label',
choice: function () {
console.log(arguments,this);
}
});