/dropdown

a lightweight dropdown of jQuery plugins

Primary LanguageJavaScriptMIT LicenseMIT

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/