选择下拉插件-Dropdown.js

插件应用

浏览数:4,552

2017-12-25

简介

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 支持readonlydisabled,不传则取消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 支持readonlydisabled,不传则取消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