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'