Select 选择器

当选项过多时,使用下拉菜单展示并选择内容。

基础用法

适用广泛的基础单选

▼显示代码

有禁用选项

▼显示代码

禁用状态

选择器不可用状态

▼显示代码

可清空单选

包含清空按钮,可将选择器清空为初始状态

▼显示代码

基础多选

适用性较广的基础多选,用 Tag 展示已选项

▼显示代码

自定义模板

可以自定义备选项

▼显示代码

分组

备选项进行分组展示

▼显示代码

可搜索

可以利用搜索功能快速查找选项

▼显示代码

创建条目

可以创建并选中选项中不存在的条目

▼显示代码

参数

你可以通过修改$.fn.select.defaults来修改全局默认配置,也可以在初始化时传入指定配置$(el).select({xx: xx})。

参数 说明 类型 可选值 默认值
value 绑定值 string / array - -
data 可选项,见下方【data参数】 array[string / { value, label, disabled }] - []
width 宽度 string - 240px
multiple 是否多选 boolean - false
disabled 是否禁用 boolean - false
optionTemplate 自定义模板 function - -
size 输入框尺寸 string medium/small/mini -
clearable 是否可以清空选项 boolean - false
collapseTags 多选时是否将选中值按文字的形式展示 boolean - false
multipleLimit 多选时用户最多可以选择的项目数,为 0 则不限制 number - 0
autocomplete select input 的 autocomplete 属性 string - 'off'
placeholder 占位符 string - '请选择'
filterable 是否可搜索 boolean - false
allowCreate 是否允许用户创建新条目,需配合 filterable 使用 boolean - false
filterMethod 自定义搜索方法 function - -
noMatchText 搜索条件无匹配时显示的文字 string - '无匹配数据'
noDataText 选项为空时显示的文字 string - '无数据'
popperClass Select 下拉框的类名 string - -
reserveKeyword 多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词 boolean - false
defaultFirstOption 在输入框按下回车,选择第一个匹配项。需配合 filterable 使用 boolean - false
change 值变更时触发的函数,参数为新值 function(value) - -
visibleChange 下拉框出现/隐藏时触发,参数出现为 true,隐藏为 false function(true/false) - -
removeTag 多选模式下移除tag时触发,参数为移除的tag值 function(value) - -
clear 可清空的单选模式下用户点击清空按钮时触发 function - -
i18n 国际化文本 key 值,参数见下方【i18n国际化】 object - -

data参数

参数默认为 Json ,若为字符串,则会被当做value赋值。

参数 说明 类型 可选值 默认值
value 值 string - -
label 显示文本 string - -
disabled 禁止使用 boolean - false
options 分组子选项数组 array - -

方法

你可以通过调用$(el).select('xxx')来调用组件方法。

方法 说明 举例
disable 禁用 $(el).select('disable')
enable 取消禁用 $(el).select('enable')
set 设置值 $(el).select('set', 1 / [1, 2])
get 获取值 $(el).select('get')
show 显示下拉框 $(el).select('show')
hide 隐藏下拉框 $(el).select('hide')

i18n国际化

参数 说明 默认值
placeholder 占位符 'uSelectPlaceholder'
noData 无数据 'uSelectNoData'
noMatch 无匹配数据 'uSelectNoMatch'