原文地址 ; https://hnzzmsf.github.io/example/example_v4.html#select_search
formSelects停止维护, 已经迁移至xm-select
formSelects-v4.js 基于Layui的多选解决方案
1、闲谈杂趣
2、交流学习
QQ号: 707200833 QQ群: 769620939
重要的事情说三遍, 看文档, 看文档, 看文档, 文档中很多都已经标注了, 文档不清楚的话, 可以加群@群主
群主会在第一时间把代码更新至 GitHub, 你可以前往 GitHub下载formSelects完整代码, 以便于二次开发
重要的事情说三遍, 看文档, 看文档, 看文档, 文档中很多都已经标注了, 文档不清楚的话, 可以加群@群主
群主会在第一时间把代码更新至 GitHub, 你可以前往 GitHub下载formSelects完整代码, 以便于二次开发
3、下载与使用
下载地址:
GitHub
使用文档: GitHub Pages
使用方式:
使用文档: GitHub Pages
使用方式:
//1.下载formSelects-v4
//然后引入formSelects.css
<link rel=
"stylesheet"
href=
"formSelects-v4.css"
/>
//2.模块化使用
<script src=
"layui.js"
type=
"text/javascript"
charset=
"utf-8"
></script>
<script type=
"text/javascript"
>
//全局定义一次, 加载formSelects
layui.config({
base:
'../src/'
//此处路径请自行处理, 可以使用绝对路径
}).extend({
formSelects:
'formSelects-v4'
});
//加载模块
layui.use([
'jquery'
,
'formSelects'
],
function
(){
var
formSelects = layui.formSelects;
});
</script>
//3.非模块化使用
<script src=
"layui.all.js"
type=
"text/javascript"
charset=
"utf-8"
></script>
<script src=
"formSelects-v4.js"
type=
"text/javascript"
charset=
"utf-8"
></script>
<script type=
"text/javascript"
>
var
formSelects = layui.formSelects;
</script>
|
一个简单的小例子
4、基本参数
| 属性名 | 说明 | 示例 |
|---|---|---|
| xm-select | 多选核心, 标记不同的多选, 多选ID | xm-select="id" |
| xm-select-max | 多选最多选择数量 | xm-select-max="3" |
| xm-select-skin | 皮肤 | xm-select-skin=" default | primary | normal | warm | danger " |
| xm-select-search | 本地搜索 & 远程搜索 | xm-select-search, xm-select-search="/search", 值为空时已有条目过滤搜索, 有值时开启远程搜索 |
| xm-select-create | 条目不存在时创建, 标记性属性 | xm-select-create |
| xm-select-direction | 下拉方向 | xm-select-direction="auto|up|down", 自动, 上, 下, 默认自动模式 |
| xm-select-radio | 单选模式 | xm-select-radio, 最多只能选择一个 |
| xm-select-search-type | 搜索框的显示位置 | xm-select-search-type="title" 在下拉选title部分显示, xm-select-search-type="dl" 在选项的第二条显示 |
| xm-select-show-count | 多选显示的label数量 | xm-select-show-count="2", 超出后隐藏 |
5、基本方法
value
/**
* 1.获取选中数据
*
* formSelects.value(ID, TYPE);
*
* @param ID xm-select的值
* @param TYPE all | val | valStr | name | nameStr
*/
var
formSelects = layui.formSelects;
formSelects.value(
'select1'
);
// [{"name":"上海","val":"2"},{"name":"深圳","val":"4"}]
formSelects.value(
'select1'
,
'all'
);
// [{"name":"上海","val":"2"},{"name":"深圳","val":"4"}]
formSelects.value(
'select1'
,
'val'
);
// ["2","4"]
formSelects.value(
'select1'
,
'valStr'
);
// 2,4
formSelects.value(
'select1'
,
'name'
);
// ["上海","深圳"]
formSelects.value(
'select1'
,
'nameStr'
);
// 上海,深圳
/**
* 2.设置select的选中值
*
* formSelects.value(ID, ARR);
*
* @param ID xm-select的值
* @param ARR value数组
*/
var
formSelects = layui.formSelects;
formSelects.value(
'select1'
, [2, 4]);
// 选中value为2和4的option → 上海,深圳
/**
* 3.追加或删除select的选中值
*
* formSelects.value(ID, ARR, isAppend);
*
* @param ID xm-select的值
* @param ARR value数组
*/
var
formSelects = layui.formSelects;
formSelects.value(
'select1'
, [2, 4],
true
);
// 追加value为2和4的option, 如果该值已选中则跳过, 该值未选中则选中
formSelects.value(
'select1'
, [2, 4],
false
);
// 删除value为2和4的option, 如果该值没有选中则跳过, 该值被选中则取消选中
|
on
/**
* 1.监听select的选中与取消
*
* formSelects.on(ID, Function);
*
* @param ID xm-select的值
* @param Function 自定义处理方法
* @param isEnd 是否获取实时数据, true/false
*/
var
formSelects = layui.formSelects;
formSelects.on(
'select1'
,
function
(id, vals, val, isAdd, isDisabled){
//id: 点击select的id
//vals: 当前select已选中的值
//val: 当前select点击的值
//isAdd: 当前操作选中or取消
//isDisabled: 当前选项是否是disabled
//如果return false, 那么将取消本次操作
return
false
;
});
//以下两种方式则配置所有的多选select
formSelects.on(
function
(id, vals, val, isAdd, isDisabled){
...
});
formSelects.on(
null
,
function
(id, vals, val, isAdd, isDisabled){
...
});
//4.0.0.0813版本之前, 受到了颇多的小伙伴吐槽, 此版本加上了获取实时数据的方法
formSelects.on(
'select1'
,
function
(id, vals, val, isAdd, isDisabled){
//id: 点击select的id
//vals: 当前select已选中的值
//val: 当前select点击的值
//isAdd: 当前操作选中or取消
//isDisabled: 当前选项是否是disabled
},
true
);
|
maxTips
/**
* 1.多选select超出最大值的提示, 默认闪烁红色边框
*
* formSelects.maxTips(ID, Function);
*
* @param ID xm-select的值
* @param Function 自定义处理方法
*/
var
formSelects = layui.formSelects;
formSelects.maxTips(
'select1'
,
function
(id, vals, val, max){
//id: 点击select的id
//vals: 当前select已选中的值
//val: 当前select点击的值
//max: 当天多选最大值
alert(
"选超了..."
);
});
//以下两种方式则配置所有的多选select
formSelects.maxTips(
function
(id, vals, val, max){
...
});
formSelects.maxTips(
null
,
function
(id, vals, val, max){
...
});
|
filter
/**
* 1.自定义本地搜索过滤方式, 默认匹配文本是否包含
*
* formSelects.filter(ID, Function);
*
* @param ID xm-select的值
* @param Function 自定义处理方法
*/
var
formSelects = layui.formSelects;
formSelects.filter(
'select1'
,
function
(id, inputVal, val, isDisabled){
//id: 点击select的id
//inputVal: 当前input搜索框中的数值
//val: 格式: {"name":"上海","val":"2"}
//isDisabled: 当前options是否被禁用
//return true时该选项被过滤, 隐藏不显示
return
true
;
});
//以下两种方式则配置所有的多选select
formSelects.filter(
function
(id, inputVal, val, isDisabled){
...
});
formSelects.filter(
null
,
function
(id, inputVal, val, isDisabled){
...
});
|
config
/**
* 1.配置远程搜索, 请求头, 请求参数, 请求类型等
*
* formSelects.config(ID, Options, isJson);
*
* @param ID xm-select的值
* @param Options 配置项
* @param isJson 是否传输json数据, true将添加请求头 Content-Type: application/json; charset=UTF-8
*/
var
formSelects = layui.formSelects;
formSelects.config(
'select1'
, {
type:
'get'
,
//请求方式: post, get, put, delete...
header: {},
//自定义请求头
data: {},
//自定义除搜索内容外的其他数据
searchUrl:
''
,
//搜索地址, 默认使用xm-select-search的值, 此参数优先级高
searchName:
'keyword'
,
//自定义搜索内容的key值
searchVal:
''
,
//自定义搜索内容, 搜素一次后失效, 优先级高于搜索框中的值
keyName:
'name'
,
//自定义返回数据中name的key, 默认 name
keyVal:
'value'
,
//自定义返回数据中value的key, 默认 value
keySel:
'selected'
,
//自定义返回数据中selected的key, 默认 selected
keyDis:
'disabled'
,
//自定义返回数据中disabled的key, 默认 disabled
keyChildren:
'children'
,
//联动多选自定义children
delay: 500,
//搜索延迟时间, 默认停止输入500ms后开始搜索
direction:
'auto'
,
//多选下拉方向, auto|up|down
response: {
statusCode: 0,
//成功状态码
statusName:
'code'
,
//code key
msgName:
'msg'
,
//msg key
dataName:
'data'
//data key
},
success:
function
(id, url, searchVal, result){
//使用远程方式的success回调
console.log(id);
//组件ID xm-select
console.log(url);
//URL
console.log(searchVal);
//搜索的value
console.log(result);
//返回的结果
},
error:
function
(id, url, searchVal, err){
//使用远程方式的error回调
//同上
console.log(err);
//err对象
},
beforeSuccess:
function
(id, url, searchVal, result){
//success之前的回调, 干嘛呢? 处理数据的, 如果后台不想修改数据, 你也不想修改源码, 那就用这种方式处理下数据结构吧
console.log(id);
//组件ID xm-select
console.log(url);
//URL
console.log(searchVal);
//搜索的value
console.log(result);
//返回的结果
return
result;
//必须return一个结果, 这个结果要符合对应的数据结构
},
beforeSearch:
function
(id, url, searchVal){
//搜索前调用此方法, return true将触发搜索, 否则不触发
if
(!searchVal){
//如果搜索内容为空,就不触发搜索
return
false
;
}
return
true
;
},
clearInput:
false
,
//当有搜索内容时, 点击选项是否清空搜索内容, 默认不清空
},
true
);
//以下两种方式则配置所有的多选select
formSelects.config(
'select1'
, {
...
},
false
);
formSelects.config(
null
, {
...
},
false
);
|
render
/**
* 1.重新渲染, 如果已经是多选则重置为初始值, 如果是初始select则渲染为多选
* 2.支持渲染时候改变多个参数
*
* formSelects.render(ID);
*
* @param ID xm-select的值
*/
var
formSelects = layui.formSelects;
formSelects.render(
'select1'
, {
init: [
"1"
,
"2"
],
//默认值
skin:
"danger"
,
//多选皮肤
height:
"auto"
,
//是否固定高度, 38px | auto
radio:
false
,
//是否设置为单选模式
direction:
"auto"
,
create:
function
(id, name){
console.log(id);
//多选id
console.log(name);
//创建的标签名称
return
Date.now();
//返回该标签对应的val
},
filter: fun...,
//同formSelects.filter
max: 3,
//多选最多选择量
maxTips: fun...,
//同formSelects.maxTips
on: fun...,
//同formSelects.on
searchType:
"title"
,
//搜索框的位置
template:
function
(name, value, selected, disabled){
console.log(name);
//选项名
console.log(value);
//选项值
console.log(selected);
//是否被选中
console.log(disabled);
//是否被禁用
//例如: 反转字符串
//return name.split('').reverse().join('');
return
name;
//返回一个html结构, 用于显示选项
},
showCount: 0,
//多选的label数量, 0,负值,非数字则显示全部
});
//以下方式则重新渲染所有的已存在多选
formSelects.render();
|
disabled
/**
* 1.禁用多选
*
* formSelects.disabled(ID);
*
* @param ID xm-select的值
*/
var
formSelects = layui.formSelects;
formSelects.disabled(
'select1'
);
//以下方式则禁用所有的已存在多选
formSelects.disabled();
|
undisabled
/**
* 1.启用多选, 启用被禁用的多选
*
* formSelects.undisabled(ID);
*
* @param ID xm-select的值
*/
var
formSelects = layui.formSelects;
formSelects.undisabled(
'select1'
);
//以下方式则启用所有的已存在多选
formSelects.undisabled();
|
data
/**
* 1.多选数据赋值
*
* formSelects.data(ID, type, config);
*
* @param ID xm-select的值
* @param type 'local' | 'server', 本地数据或者远程数据
* @param config 配置项
* arr 本地数据数组
* url 远程数据链接
* keyword 远程数据搜索内容, 其他附加数据可以使用 formSelects.config设置
* linkage 是否为联动多选
* linkageWidth 联动多选没级宽度
*/
//以下代码可以在console中运行测试, 结果查看基础示例第一个
var
formSelects = layui.formSelects;
//local模式
formSelects.data(
'select1'
,
'local'
, {
arr: [
{
"name"
:
"分组-1"
,
"type"
:
"optgroup"
},
{
"name"
:
"北京"
,
"value"
: 1},
{
"name"
:
"上海"
,
"value"
: 2},
{
"name"
:
"分组-2"
,
"type"
:
"optgroup"
},
{
"name"
:
"广州"
,
"value"
: 3},
{
"name"
:
"深圳"
,
"value"
: 4},
{
"name"
:
"天津"
,
"value"
: 5}
]
});
//server模式
formSelects.data(
'select1'
,
'server'
, {
keyword:
'水果'
});
//server返回数据与远程搜索数据结构一致
{
"code"
:0,
"msg"
:
"success"
,
"data"
:[
{
"name"
:
"北京"
,
"value"
:1,
"selected"
:
""
,
"disabled"
:
""
},
{
"name"
:
"上海"
,
"value"
:2,
"selected"
:
""
,
"disabled"
:
""
},
{
"name"
:
"广州"
,
"value"
:3,
"selected"
:
"selected"
,
"disabled"
:
""
},
{
"name"
:
"深圳"
,
"value"
:4,
"selected"
:
""
,
"disabled"
:
"disabled"
},
{
"name"
:
"天津"
,
"value"
:5,
"selected"
:
""
,
"disabled"
:
""
}
]
}
//当然你也可以偷懒, 返回如下结构
[
{
"name"
:
"北京"
,
"value"
:1,
"selected"
:
""
,
"disabled"
:
""
},
{
"name"
:
"上海"
,
"value"
:2,
"selected"
:
""
,
"disabled"
:
""
},
{
"name"
:
"广州"
,
"value"
:3,
"selected"
:
"selected"
,
"disabled"
:
""
},
{
"name"
:
"深圳"
,
"value"
:4,
"selected"
:
""
,
"disabled"
:
"disabled"
},
{
"name"
:
"天津"
,
"value"
:5,
"selected"
:
""
,
"disabled"
:
""
}
]
/*************** 华丽的分割线 ***************/
//来一个树状结构的数据
formSelects.data(
'select15'
,
'local'
, {
arr: [
{name:
'北京'
, value: 1, xslkdf:
'123'
, children: [
{name:
'朝阳'
, value: 11},
{name:
'海淀'
, value: 12}
]},
{name:
'深圳'
, value: 2, children: [{name:
'龙岗'
, value: 21}]},
]
});
/*************** 华丽的分割线 ***************/
//联动多选数据格式
//local, 注意 value值请保证唯一
formSelects.data(
'select15'
,
'local'
, {
arr: [
{
"name"
:
"北京"
,
"value"
: 1,
"children"
: [
{
"name"
:
"北京市1"
,
"value"
: 12,
"children"
: [
{
"name"
:
"朝阳区1"
,
"value"
: 13,
"children"
: []},
{
"name"
:
"朝阳区2"
,
"value"
: 14,
"children"
: []},
{
"name"
:
"朝阳区3"
,
"value"
: 15,
"children"
: []},
{
"name"
:
"朝阳区4"
,
"value"
: 16,
"children"
: []},
]},
{
"name"
:
"北京市2"
,
"value"
: 17,
"children"
: []},
{
"name"
:
"北京市3"
,
"value"
: 18,
"children"
: []},
{
"name"
:
"北京市4"
,
"value"
: 19,
"children"
: []},
]
},
{
"name"
:
"天津"
,
"value"
: 2,
"children"
: [
{
"name"
:
"天津市1"
,
"value"
: 51,
"children"
: []},
]
},
],
linkage:
true
//开启联动模式
});
//server
formSelects.data(
'select15'
,
'server'
, {
linkage:
true
,
linkageWidth: 130
//代表每一级别的宽度, 默认是100
});
//server返回数据, 同上 value不能重复
{
"code"
:0,
"msg"
:
"success"
,
"data"
:[
{
"name"
:
"北京"
,
"value"
: 1,
"children"
: [
{
"name"
:
"北京市1"
,
"value"
: 12,
"children"
: [
{
"name"
:
"朝阳区1"
,
"value"
: 13,
"children"
: []},
{
"name"
:
"朝阳区2"
,
"value"
: 14,
"children"
: []},
{
"name"
:
"朝阳区3"
,
"value"
: 15,
"children"
: []},
{
"name"
:
"朝阳区4"
,
"value"
: 16,
"children"
: []},
]},
{
"name"
:
"北京市2"
,
"value"
: 17,
"children"
: []},
{
"name"
:
"北京市3"
,
"value"
: 18,
"children"
: []},
{
"name"
:
"北京市4"
,
"value"
: 19,
"children"
: []},
]
},
{
"name"
:
"天津"
,
"value"
: 2,
"children"
: [
{
"name"
:
"天津市1"
,
"value"
: 51,
"children"
: []},
]
},
]
}
|
btns
/**
* 1.快捷操作
*
* formSelects.btns(ID, BTNS, config);
*
* @param ID xm-select的值
* @param BTNS 定义操作列表, 内置三种操作, select:全选, remove:清空, skin:换肤, 当然你可以自定义
* @param config 配置操作列表, config.show='name' 只显示名称, config.show='icon' 只显示图标, config.space='30px' 两个操作之间的间隔
*/
var
formSelects = layui.formSelects;
//默认设置了 全选, 清空, 反选
//如下设置内置操作
formSelects.btns(
'select1'
, [
'select'
,
'remove'
,
'reverse'
]);
//如下设置自定义
formSelects.btns(
'select1'
, [
'select'
,
'remove'
,
'skin'
, {
icon:
'layui-icon layui-icon-ok'
,
//自定义图标, 可以使用layui内置图标
name:
'提示名称'
,
click:
function
(id){
//点击后的操作
alert(
'点击了自定义快捷操作'
)
}
}]);
//配置只显示名称,紧凑型, 适合宽度较窄的情况
formSelects.btns(
'select1'
, [
'select'
,
'remove'
], {show:
'name'
, space:
'10px'
});
//如下写法定义所有的多选
formSelects.btns([
'select'
,
'remove'
,
'skin'
]);
// !!友情提示: name不能重复
|
search
/**
* 1.触发搜索
*
* formSelects.search(ID, val);
*
* @param ID xm-select的值
* @param BTNS 搜索内容
*/
var
formSelects = layui.formSelects;
//使用js主动触发搜索
formSelects.search(
'select1'
,
'关键内容'
);
|
opened
/**
* 1.打开下拉框的回调事件
*
* formSelects.opened(ID);
*
* @param ID xm-select的值
*/
var
formSelects = layui.formSelects;
//监听下拉框的打开
formSelects.opened(
'select1'
,
function
(id){
console.log(
'打开了'
);
});
//如下定义所有
formSelects.opened(
null
,
function
(id){
console.log(
'打开了'
);
});
formSelects.opened(
function
(id){
console.log(
'打开了'
);
});
|
closed
/**
* 1.关闭下拉框的回调事件
*
* formSelects.closed(ID);
*
* @param ID xm-select的值
*/
var
formSelects = layui.formSelects;
//监听下拉框的关闭
formSelects.closed(
'select1'
,
function
(id){
console.log(
'合上了'
);
});
//如下定义所有
formSelects.closed(
null
,
function
(id){
console.log(
'合上了'
);
});
formSelects.closed(
function
(id){
console.log(
'合上了'
);
});
|
6、基础示例
基础多选
适用性较广的基础多选，用 Tag 展示已选项
上海
pane模式
layui pane模式
上海
分组多选
基于layui的分组多选
上海
自定义tips
写一个空的option放在第一个
上海
多选上限
xm-select-max="3", 超过3个后, 默认闪烁红框提示
上海
当然, 如果你初始化值就多于max值, 那是可以设置成功滴, 取消了就选不回来了
北京
多选皮肤
xm-select-skin="default"
上海
xm-select-skin="primary", 这个墨绿style已经被内置成为了经典皮肤, 只因他诞生于layui的经典颜色
上海
xm-select-skin="normal"
上海
xm-select-skin="warm"
上海
xm-select-skin="danger"
上海
本地搜索
xm-select-search, 搜索已存在的option
上海
分组中的搜索
上海
远程搜索
xm-select-search="/search", 指定一个url, 将开启远程搜索模式
上海
远程搜索response结构, 其中name, value可以自定义, 请查看method config
code为0时, 表示正常, 不为0时则提示msg信息
{
"code"
: 0,
"msg"
:
"success"
,
"data"
: [
{
"name"
:
"北京"
,
"value"
:1,
"selected"
:
""
,
"disabled"
:
""
},
{
"name"
:
"上海"
,
"value"
:2,
"selected"
:
""
,
"disabled"
:
""
},
{
"name"
:
"广州"
,
"value"
:3,
"selected"
:
"selected"
,
"disabled"
:
""
},
{
"name"
:
"深圳"
,
"value"
:4,
"selected"
:
""
,
"disabled"
:
"disabled"
},
{
"name"
:
"天津"
,
"value"
:5,
"selected"
:
""
,
"disabled"
:
""
}
]
}
|
当然, 远程搜索也是可以分组的
上海
{
"code"
: 0,
"msg"
:
"success"
,
"data"
: [
{
"name"
:
"分组-1"
,
"type"
:
"optgroup"
},
{
"name"
:
"北京"
,
"value"
:1,
"selected"
:
""
,
"disabled"
:
""
},
{
"name"
:
"上海"
,
"value"
:2,
"selected"
:
""
,
"disabled"
:
""
},
{
"name"
:
"分组-2"
,
"type"
:
"optgroup"
},
{
"name"
:
"广州"
,
"value"
:3,
"selected"
:
"selected"
,
"disabled"
:
""
},
{
"name"
:
"深圳"
,
"value"
:4,
"selected"
:
""
,
"disabled"
:
"disabled"
},
{
"name"
:
"天津"
,
"value"
:5,
"selected"
:
""
,
"disabled"
:
""
}
]
}
|
创建条目
xm-select-create, 不存在时会创建, 选中后长久保留, value为Date.now()生成
上海
下拉方向
方式一: xm-select-direction="auto|up|down", 自动, 上, 下, 默认自动模式
方式二: 使用formSelects.config配置
//配置某一个多选的方向
layui.formSelects.config(
'select1'
, {direction:
'up'
});
//配置所有多选的方向
layui.formSelects.config({direction:
'up'
});
|
我是朝上的
上海
我是朝下的
上海
其他的都是自动处理的哈, 当然没有朝左朝右的
我是一个动态的
上海
固定高度
xm-select-height="36px", 多选的高度是随便选项的变化而变化的, 当然你也可以固定一个高度, 从此高度将不再变化
北京
禁用select
disabled="disabled", 多选的高度是随便选项的变化而变化的, 当然你也可以固定一个高度, 从此高度将不再变化
广州
动态操作select的启用与禁用
广州
单选模式
xm-select-radio, 单选模式
杭州
表单操作
支持layui原生表单验证, lay-verify="xxx"
tips模式, lay-verify="required", lay-verType="tips"
支持表单提交自动赋值, 只需要在select加上name属性即可, 点击提交可查看url的变化
支持reset操作, 选择几项数据, 然后点击重置
多选联动
多选联动, 联动需要使用data来赋值, 先给一个空select标记多选, 记得value不能重复哦
多选联动, 使用远程数据实现省市区三级联动
宽度是可以自定义的, linkageWidth: 130, 默认100
快捷操作
设置内置的快捷操作
广州
自定义快捷操作
广州
你是可以换数组位置, 更换显示位置滴
如果内置操作不满意, 完全可以自定义
广州
如果不需要快捷操作, 设置一个空数组就可以了, 它会变回以前的模样
广州
只显示图标
只显示名称
显示图标+名称, 但是是紧凑型的
7、进阶示例
监听select选择
适用于动态操作
选择[北京]时, 会发现选不上哦
获取实时数据
赋值与取值
多选取值
北京
多选赋值
北京
超选后的提示
如果设置了xm-select-max="3", 当你选择第四个的时候会默认闪烁红框提示, 当然这个提示你可以自定义
深圳
自定义搜索
如果设置了xm-select-search="", 当你搜索的时候是默认判断选项文本是否包含搜索的值
如下是检测 全拼,简拼,文本是否包含, 其中汉字转拼音摘录于网络
可以尝试使用拼音进行搜索
友情提示: 远程搜索是不会经过此方法滴
配置
说起来这是个又爱又恨的方法, 设计之初是准备专门配置远程搜索用的, 无奈后面增加了很多东西, 结果变成了专门的配置方法了
好像没啥好说的, 都是点儿配置的东西, 说点儿场景吧
- 默认本地数据, js动态配置成远程搜索, 首先开启搜索模式 xm-select-search="", 然后config中定义url, 适用于url为可变参数的情况下
- 点击加载
- beforeSuccess的用法
当然上面的处理方法是用于演示beforeSuccess的用法的, 正确的姿势应该是转换数据结构滴
success, error可以直接打开控制台, 查看console的打印记录
远程数据的赋值
远程数据是使用ajax异步的模式来获取的, 所以赋值不能直接在config之后
方式一: 在返回数据中包含selected属性
方式二: 在success回调中使用value进行赋值
上面好像不太对
动态数据
本地数据
远程数据, 也许你只希望加载一次, 而不是搜索一次变一次, 这个更适合你
不知道你们为什么吐槽我的设计, 也许真的是不好, 新增如下写法
来一发树状结构压压惊
搜索控制
当输入内容为空时不触发搜索
主动触发搜索
显示数量
默认显示全部, 如果设置了高度的话就是显示指定范围内的label, 当然你也可以控制显示的数量
xm-select-show-count="2", 最多显示2个, 多余的隐藏
北京
<div class=
"layui-form"
>
<select name=
"city"
xm-select=
"example8_1"
xm-select-show-count=
"2"
>
<option value=
"1"
>北京</option>
<option value=
"2"
>上海</option>
<option value=
"3"
>广州</option>
<option value=
"4"
>深圳</option>
<option value=
"5"
>天津</option>
<option value=
"6"
>郑州</option>
<option value=
"7"
>合肥</option>
<option value=
"8"
>邯郸</option>
<option value=
"9"
>舟山</option>
<option value=
"10"
>海南</option>
<option value=
"11"
>南京</option>
<option value=
"12"
>哈尔滨</option>
</select>
</div>
|
自定义模板
选项默认是显示的孤零零的name值, 你也可以自定义格式
比如来一个左边name, 右边拼音的
搜索位置
默认是在title上的, 可以设置到选项中, 前提是你打开了搜索
xm-select-search-type="dl"
树状结构
惊喜有没有, 树状结构来一发
监听打开关闭
监听下拉选框的打开与关闭
结尾
↓↓↓ 捐赠作者 ↓↓↓
你们的支持, 是我们坚持的动力
[2019-06-24] v4.x
-- 修复 --
1. 修复文档中因为https无法访问http接口的问题, 从 http:
//yapi.demo.qunar.com 更换为 https://www.fastmock.site
2. 一个简单的手段, 让树状结构能够收起来
3. 修改template中文档写法错误
其实天下没有不散的宴席, 目前来看 jQuery 已经成为了历史, 加油吧, 小伙伴, 努力向最新的技术看齐~~~
|