此次使用的xm-select插件,一款始于layui,下拉选择框的多选解决方案插件
快速上手使用:
1.首先下载xm-select.js文件,然后放到项目里
下载地址:https://toscode.gitee.com/maplemei/xm-select/tree/master/dist
2.写一个
<div class="layui-form" >
<div class="layui-form-item">
<label class="layui-form-label">展示位置</label>
<div class="layui-input-block">
<div id="demo1" style="width: 300px"></div>
</div>
</div>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
js
layui.config({
base: '../../layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index', //主入口模块
xmSelect: "xm-select"
}).use(['index', 'element','form','xmSelect'], function () {
var $ = layui.$
, element = layui.element
,form = layui.form;
var router = layui.router();
var xmSelect = layui.xmSelect
......
//渲染数据
var demo1 = xmSelect.render({
el: '#demo1',
data: [
{name: '水果', value: 1,selected:false},
{name: '蔬菜', value: 2,selected:false},
{name: '桌子', value: 3,selected:false},
{name: '北京', value: 4,selected:false},
],
})
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
常用的方法:
// 获取选中值, demo1.getValue();
// 设置选中值, demo1.setValue([{ name: ‘动态值’, value: 999 }])
效果图: