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' |