🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Dropdown is a jQuery-based lightweight drop-down box plug-in, support key / value search, token and select two modes.Features:Support select and token two modesSupport optgroup groupingKeep the native select keyboard operationData source can be directly injected through the interface data can also be directly rendered select > option, automatically converted by the plug-in.Plug-in synchronization select and ul > li tag, easy to form field submission and front-end verification,

Ajax Plugins

Documentation

Dropdown

Dropdown是面向PC端的基于jQuery开发的轻量级下拉框插件,支持key/value搜索,有token和select两种模式。

Version

  • 1.2.0

Support

  • Internet Explorer 8+
  • Chrome for PC
  • Safari for PC
  • Firefox for PC

Based

  • jQuery 1.4+

Log

  • 2018-05-28 version 1.2.2

    • 优化value值的匹配,#33
  • 2017-10-13 version 1.2.0

    • 新增方法 reset
    • 搜索支持分组名
  • 2017-08-05 version 1.1.7

    • 修复BUG #6
  • 2017-08-05 version 1.1.6

    • 新增自定义字段 extendProps
    • 新增方法 choose
    • 优化回调函数 choice(event,data),新增第二个入参
    • #6
  • 2017-07-19 version 1.1.5

    • 新增 init 回调函数
    • 修复 #4 的问题
  • 2017-07-06 version 1.1.4

    • 修复value值为中文时的错误 #2
    • 修复单选无法触发回调问题 #2
    • 修复destroy时,事件未被移除的BUG #3
  • 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 上线

Feature

  1. 支持 selecttoken 两种模式
  2. 支持 optgroup 分组
  3. 保留原生 select 的键盘操作
  4. 数据源可以直接通过接口 data 注入,也可以直接渲染 select>option ,由插件自动转换。
  5. 插件同步 selectul>li 标签,便于表单字段提交及前端校验,

Principle

程序设计原理如下图所示:

在一些前端渲染的场景,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

Options

名称 描述 类型 默认
readOnly 是否只读 Boolean false
minCount 下限 Number 0
minCountErrorMessage 下限自定義錯誤消息 String 最低选择个
limitCount 选择上限 Number Infinity
limitCountErrorMessage 上限的自定义错误消息 String 最多可选择个
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']

Methods

changeStatus(status)

修改组件状态

参数 类型 描述
status String 支持readonlydisabled,不传则取消readonly/disabled
return undefined
var dropdown = $('selector').dropdown(options).data('dropdown'); dropdown.changeStatus('readonly') // readonly dropdown.changeStatus('disabled') // disabled dropdown.changeStatus() // cancel 

choose(value,status)

动态选择值

参数 类型 描述
value String|Array 需要被选中的值,多个值用数字 ['one','two','three']
status Boolean 选中或取消,默认为: true
return undefined
var dropdown = $('selector').dropdown(options).data('dropdown'); dropdown.destroy(); 

update(Array,isCover)

更新数据

参数 类型 描述
data Array 需要更新的数据
isCover Boolean 是否覆盖原有数据,默认不覆盖

destroy()

销毁组件

参数 类型 描述
return undefined
var dropdown = $('selector').dropdown(options).data('dropdown'); dropdown.destroy(); 

reset()

重置

参数 类型 描述
return undefined
var dropdown = $('selector').dropdown(options).data('dropdown'); dropdown.reset(); 

Usage

引入

<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);   } });

Example

https://janking.github.io/dropdown/


You May Also Like