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 //控件宽度,注意这里不是下拉选项的宽度
});

在线试一试