html input dropdown,选择下拉插件-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

data

数据源

Array

[]

searchable

是否可开启搜索

Boolean

true

searchNoData

无数据模板

HTML

查无数据，换个词儿试试 /(ㄒoㄒ)/~~

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

使用方法

引入

HTML

1

2

3

4

5

6

7

8

9

10

11

12

JavaScript

$('.dropdown-mul-1').dropdown({

limitCount: 40,

multipleMode: 'label',

choice: function () {

console.log(arguments,this);

}

});