jquery下拉插件select2教程
select2配置
select2下拉插件的完整配置列表
| 名称 | 类型 | 描述 |
| ajax | object | 服务器端返回数据源 |
| allowClear | false | 是否有清除选项 |
| closeOnSelect |
true |
用户选择后是否关闭下拉选项 |
| data | 数据源数组 | var data = [{id: 0,text: '男'}, { id: 1,text: '女' }]; |
| debug | false | 是否显示调试信息 |
| disabled | false | 是否开启和禁用 |
| dropdownAutoWidth | false | 下拉展开宽度是否根据内容自动适配 |
| dropdownParent | jQuery选择器或DOM节点 | 设置后下拉内容的停靠对象 |
| language | es | 语言 |
| matcher |
函数 |
自定义刷选函数 |
| maximumInputLength | 整数 | 刷选最多多少给字符 |
| minimumInputLength | 整数 | 比如输入2给字符再触发刷选功能 |
| minimumResultsForSearch | 整数 |
下拉列表数量大于等于这个值时显示搜索刷选框 |
| multiple | false | 是否允许多选 |
| placeholder | 字符串 | 提示信息 |
| selectOnClose | true | 关闭下拉列表时实现自动选择 |
| templateResult |
回调函数 |
自定义刷选结果的呈现方式 |
| templateSelection | 回调函数 | 自定义选择的呈现方式 |
| theme | 字符串default | 样式模板 |
| width | 整数 | 控件宽度 |
代码示例
$('#status').select2({
allowClear:true,//显示清除选项
closeOnSelect:true,//选择完后自动关闭展开项
data:[{id: 0,text: '微软'}, { id: 1,text: 'Google' }, { id: 3,text: 'ITXST' }],//数据源
disabled:false,//不禁用控件
dropdownAutoWidth:true,//下拉框大小根据内容大小显示
language:"es", //显示语言
multiple:true,//设置为多选
placeholder:"请选择公司",//提示内容
theme:"default",//皮肤
width:160 //控件宽度，注意这里不是下拉选项的宽度
});