15 Star 69 Fork 12

imlzw / formSelects

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 4.28 KB
一键复制 编辑 原始数据 按行查看 历史
林志伟 提交于 2018-08-24 10:07 . 更新readme

formSelects


文档地址

演示站点


基于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

微信群:

formSelects

更新记录

4.0.0.0713

友情链接

码云formSelects

新增:

  1. 分页加载功能:

输入图片说明


<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>
JavaScript
1
https://gitee.com/imlzw/formSelects.git
git@gitee.com:imlzw/formSelects.git
imlzw
formSelects
formSelects
master

搜索帮助