基于Layui的select多选解决方案
formSelects有哪些功能
- 基础功能
- 多选
- 分组
- 取值&赋值
- 选择监听
- 搜索
- 启用&禁用
- 多选皮肤
- 重复选
- 高级功能
- 下拉方向
- 显示数量
- 选择数量
- 远程搜索
- 动态数据
- 动态创建
- 搜索过滤
- 快捷操作
- 选项模板
- 多级联动
├─UI //文档示例用到的一些组件库, layui等
├─dist //编译后的代码, 可直接用于生产环境
│ │─formSelects-v3.js //v3版本
│ │─formSelects-v4.css //v4版本css
│ │─formSelects-v4.js //v4版本js
│ │─formSelects-v4.min.js //v4版本压缩后的js
├─docs //文档目录
├─example //示例目录
├─src //源码目录, 可用于二次开发
│ │─formSelects-v3.js
│ │─formSelects-v4.js
└─README.md
推荐从 Github clone最新版本
<!-- 引入样式 -->
<link rel="stylesheet" type="text/css" href="//raw.githack.com/hnzzmsf/layui-formSelects/master/dist/formSelects-v4.css"/>
<!-- 引入jquery依赖 -->
<script src="//unpkg.com/jquery@3.3.1/dist/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入组件 -->
<script src="//raw.githack.com/hnzzmsf/layui-formSelects/master/dist/formSelects-v4.js" type="text/javascript" charset="utf-8"></script><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="formSelects-v4.css"/>
</head>
<body>
<div>
<select name="city" xm-select="selectId">
<option value="1" disabled="disabled">北京</option>
<option value="2" selected="selected">上海</option>
<option value="3">广州</option>
<option value="4" selected="selected">深圳</option>
<option value="5">天津</option>
</select>
</div>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
formSelects.render('selectId');
</script>
</body>
</html>
QQ 群: 769620939
QQ 号: 707200833
微信群:
新增：
- 分页加载功能：
<select id="industry_category_select" name="industryCategory" xm-select-search="" lay-verify="required" xm-select-radio=""
placeholder="行业" autocomplete="off" xm-select-height="36px" xm-select-skin="normal" xm-select="industry_category_select" lay-filter="industry_category_select" >
<option value="">请选择行业类别</option>
</select>
<script>
layui.formSelects.data('industry_select',"server", {
url: '/industryList',
showPage: true,
size: 6
});
</script>
2.级联异步加载功能
<select name="orgArea" xm-select="orgArea" lay-verify="required" xm-select-radio="" xm-select-skin="normal">
<option value="">请选择单位所在省市区</option>
</select>
<script>
layui.formSelects.data('orgArea', 'server', {
url: '/city',
linkage: true,
linkageWidth: 130
});
</script>