-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5cba8d0
commit 3eb4509
Showing
4 changed files
with
527 additions
and
239 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,75 +1,7 @@ | ||
## 介绍 | ||
|
||
layui2.8,select多选,支持搜索 | ||
layui2.9.*,select多选,支持搜索 | ||
|
||
## 使用示例 | ||
``` | ||
<div class="layui-container"> | ||
<form class="layui-form"> | ||
<div class="layui-form-item"> | ||
<label class="layui-form-label">城市</label> | ||
<div class="layui-input-block"> | ||
<div id="select"></div> | ||
</div> | ||
</div> | ||
<button class="layui-btn" lay-submit lay-filter="demo-verify">提交</button> | ||
<button class="layui-btn" type="button" id="reload">重载</button> | ||
</form> | ||
</div> | ||
``` | ||
``` | ||
layui.config({ | ||
// 模块地址 | ||
base: '/test/layui/' | ||
}).extend({ | ||
// 定义模块路径 | ||
select: 'select' | ||
}); | ||
layui.use(['select', 'form'], function(){ | ||
const select = layui.select; | ||
const form = layui.form; | ||
const $ = layui.$; | ||
const citySelect = select.render({ | ||
elem: '#select', | ||
// 表单名称 | ||
name: 'city', | ||
options: [{id: 1,title: '北京'}, {id: 2,title: '上海'}, {id: 3,title: '湖北'}], | ||
// 验证规则 | ||
verify: 'required', | ||
// 初始值 | ||
value: [{id: 1,title: '北京'}, {id: 2,title: '上海'}] | ||
}); | ||
$('#reload').click(function() { | ||
// 重载 | ||
citySelect.reload({ | ||
options: [{id: 1,title: '北京'}, {id: 2,title: '上海'}, {id: 3,title: '湖北'}, {id: 4,title: '湖南'}], | ||
}); | ||
// 传参:设置值 | ||
citySelect.val('1,4'); | ||
// 不传参,获取值 | ||
citySelect.val(); | ||
// 清除值 | ||
citySelect.reset(); | ||
}); | ||
// 提交事件 | ||
form.on('submit(demo-verify)', function(data){ | ||
var field = data.field; // 获取表单字段值 | ||
// 显示填写结果,仅作演示用 | ||
layer.alert(JSON.stringify(field), { | ||
title: '当前填写的字段值' | ||
}); | ||
// 此处可执行 Ajax 等操作 | ||
// … | ||
return false; // 阻止默认 form 跳转 | ||
}); | ||
}); | ||
``` | ||
|
||
## 示例图 | ||
![image](https://github.com/lanrenbulan/layui-select-multiple/assets/9604624/a40a1233-19a1-45b2-8908-db119b139bdf) | ||
|
||
见index.html |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,172 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<title></title> | ||
<link href="//unpkg.com/layui@2.9.4/dist/css/layui.css" rel="stylesheet"> | ||
<link rel="stylesheet" type="text/css" href="select.css"> | ||
</head> | ||
<body> | ||
|
||
<div class="layui-container" style="width: 500px"> | ||
<form class="layui-form"> | ||
<div class="layui-form-item"> | ||
<label class="layui-form-label">城市</label> | ||
<div class="layui-input-block"> | ||
<input id="multi-select1" name="cities1" class="layui-input" readonly lay-verify="required" placeholder="请选择" /> | ||
</div> | ||
</div> | ||
|
||
<div class="layui-form-item"> | ||
<label class="layui-form-label">城市</label> | ||
<div class="layui-input-block"> | ||
<div class="layui-input-group" style="width 100%;"> | ||
<div class="layui-input-split layui-input-prefix"> | ||
前缀前缀 | ||
</div> | ||
<input id="multi-select2" name="cities2" class="layui-input" readonly lay-verify="required" placeholder="请选择" /> | ||
<div class="layui-input-split layui-input-suffix"> | ||
后缀 | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="layui-form-item"> | ||
<label class="layui-form-label">城市</label> | ||
<div class="layui-input-block"> | ||
<input id="multi-select3" name="cities3" class="layui-input" readonly lay-verify="required" placeholder="请选择" /> | ||
</div> | ||
</div> | ||
|
||
<div class="layui-form-item"> | ||
<label class="layui-form-label">城市</label> | ||
<div class="layui-input-block"> | ||
<input id="multi-select4" name="cities4" class="layui-input" readonly lay-verify="required" placeholder="请选择" /> | ||
</div> | ||
</div> | ||
|
||
<button class="layui-btn" lay-submit lay-filter="demo-verify">提交</button> | ||
<button class="layui-btn" type="button" id="reload">重载</button> | ||
</form> | ||
|
||
<input id="multi-select5" name="cities5" class="layui-input" readonly lay-verify="required" placeholder="请选择" /> | ||
</div> | ||
|
||
<script src="//unpkg.com/layui@2.9.4/dist/layui.js"></script> | ||
|
||
<script> | ||
layui.config({ | ||
base: '/test/layui/' | ||
}).extend({ | ||
select: 'select' | ||
}); | ||
layui.use(['select', 'form'], function(){ | ||
const select = layui.select; | ||
const form = layui.form; | ||
const $ = layui.$; | ||
|
||
var selected = true; | ||
|
||
for(let i = 1; i <= 3; i++) { | ||
select.render({ | ||
elem: '#multi-select' + i, | ||
keywordPlaceholder: '关键词', | ||
unfilteredText: '没有匹配的选项', | ||
collapseSelected: true, | ||
options: [ | ||
{id: 1,title: '北京', selected: selected}, | ||
{id: 2,title: '上海', selected: selected}, | ||
{id: 3,title: '湖北', selected: selected}, | ||
{id: 4,title: '湖南', selected: selected}, | ||
{id: 5,title: '河北', selected: selected}, | ||
{id: 6,title: '山西', selected: selected}, | ||
{id: 7,title: '内蒙古', selected: selected}, | ||
{id: 8,title: '西藏', selected: selected}, | ||
{id: 9,title: '台湾', selected: selected}, | ||
{id: 10,title: '新疆', selected: selected}, | ||
{id: 11,title: '天津', selected: selected}, | ||
{id: 12,title: '山东', selected: selected}, | ||
{id: 13,title: '浙江'}, | ||
{id: 14,title: '福建'}, | ||
{id: 15,title: '广西'}, | ||
{id: 16,title: '贵州'}, | ||
{id: 17,title: '四川'}, | ||
], | ||
}); | ||
} | ||
|
||
select.render({ | ||
elem: '#multi-select4', | ||
keywordPlaceholder: '关键词', | ||
unfilteredText: '没有匹配的选项', | ||
options: [ | ||
{id: 1,title: '北京', selected: false}, | ||
{id: 2,title: '上海', selected: selected}, | ||
{id: 3,title: '湖北', selected: false}, | ||
{id: 4,title: '湖南', selected: selected}, | ||
{id: 5,title: '河北', selected: false}, | ||
{id: 6,title: '山西', selected: selected}, | ||
{id: 7,title: '内蒙古', selected: false}, | ||
{id: 8,title: '西藏', selected: selected}, | ||
{id: 9,title: '台湾', selected: false}, | ||
{id: 10,title: '新疆', selected: false}, | ||
{id: 11,title: '天津', selected: false}, | ||
{id: 12,title: '山东', selected: false}, | ||
{id: 13,title: '浙江'}, | ||
{id: 14,title: '福建'}, | ||
{id: 15,title: '广西'}, | ||
{id: 16,title: '贵州'}, | ||
{id: 17,title: '四川'}, | ||
], | ||
}); | ||
|
||
const select5 = select.render({ | ||
elem: '#multi-select5', | ||
keywordPlaceholder: '关键词', | ||
unfilteredText: '没有匹配的选项', | ||
options: [ | ||
{id: 1,title: '北京', selected: false}, | ||
{id: 2,title: '上海', selected: selected}, | ||
{id: 3,title: '湖北', selected: false}, | ||
{id: 4,title: '湖南', selected: selected}, | ||
{id: 5,title: '河北', selected: false}, | ||
{id: 6,title: '山西', selected: selected}, | ||
{id: 7,title: '内蒙古', selected: false}, | ||
{id: 8,title: '西藏', selected: selected}, | ||
{id: 9,title: '台湾', selected: false}, | ||
{id: 10,title: '新疆', selected: false}, | ||
{id: 11,title: '天津', selected: false}, | ||
{id: 12,title: '山东', selected: false}, | ||
{id: 13,title: '浙江'}, | ||
{id: 14,title: '福建'}, | ||
{id: 15,title: '广西'}, | ||
{id: 16,title: '贵州'}, | ||
{id: 17,title: '四川'}, | ||
], | ||
}); | ||
|
||
|
||
$('#reload').click(function() { | ||
select5.reload({ | ||
options: [{id: 1,title: '北京'}, {id: 2,title: '上海'}, {id: 3,title: '湖北'}, {id: 4,title: '湖南'}], | ||
}); | ||
select5.val('1,4') | ||
}); | ||
|
||
// 提交事件 | ||
form.on('submit(demo-verify)', function(data){ | ||
var field = data.field; // 获取表单字段值 | ||
// 显示填写结果,仅作演示用 | ||
layer.alert(JSON.stringify(field), { | ||
title: '当前填写的字段值' | ||
}); | ||
// 此处可执行 Ajax 等操作 | ||
// … | ||
return false; // 阻止默认 form 跳转 | ||
}); | ||
}); | ||
</script> | ||
</body> | ||
</html> |
Oops, something went wrong.