layui下拉多选框怎么实现？类似于下面这种效果的。
网友回复
使用xmselect
完整示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- layui css -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css">
<!-- layui js -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.all.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/xm-select.js"></script>
</head>
<body style="min-height: 1000px;">
<div class="layui-container">
<!-- 拷贝整个.layui-card 即可 -->
<div class="layui-card" id="userinfo">
<div class="layui-card-header">下拉框多选:默认选中,远程搜索等常用参数</div>
<div class="layui-card-body">
<form class="layui-form" action="" lay-filter="info">
<div class="layui-form-item">
<div id="demo1"></div>
</div>
</form>
<script>
var options = {
el: '#demo1',
name: 'xmselectName',//表单的name属性
layVerify: 'required',//必填项
//layVerType: 'tips',//提示类型 同layui
tips: '你喜欢什么水果呢?傻瓜教程',
toolbar: {//工具条,全选,清空,反选,自定义
show: true,
list: [
'ALL',
'CLEAR',
'REVERSE',
{
name: '自定义',
icon: 'el-icon-star-off',
method(data){
alert('我是自定义的');
}
}
]
},
data: [],
initValue: [1,2],//默认初始化,也可以数据中selected属性
//language: 'zn',//语言包
//filterable: true,//搜索功能
//autoRow: true,//选项过多,自动换行
// repeat: true,//是否支持重复选择
//max: 2,//最多选择2个
// template({ item, sels, name, value }){
// //template:自定义下拉框的模板
// return item.name + '<span style="position: absolute; right: 10px; color: #8799a3">'+value+'</span>'
// },
};
var demo1 = xmSelect.render(options)
setTimeout(function(){
//假设data是ajax 异步获取的
var data =[
//selected属性可以初始化下拉框
//{name: '水果', value:'shuiguo',selected:true, disabled: true},
{name: '水果', value:1},
{name: '蔬菜', value: 2},
{name: '桌子', value: 3},
{name: '北京', value: 4},
];
//模拟通过ajax 获取json数据,异步更新多选下拉框的值
demo1.update({data: data})
demo1.setValue([1]);
console.log( demo1.getValue());
},100);
</script>
</div>
</div>
</div>
</body>
</html>
xmselect的赋值与取值
var selectTest = xmselect.render()
xmselect对象在渲染时返回的元素在这里派上用场了 selectTest.setValue([1]);
参数: value值的数组（data中的value值），如果你的data数据完整那么xmselect对象会通过指定的value值回显。 当然没有完整的下拉栏信息，也可以设置单条数据回显。 selectTest.setValue([{ name: '动态值', value: 999 }])
其他方法：
获取value值 selectTest.getValue();
by thinkfuture
我知道答案，我要回答
私活外包
最新提问
