首先需要下载xm-select.js下面是参考链接,可下载。
https://gitee.com/maplemei/xm-select
之后可以直接运行样例:
样例一:
<!DOCTYPE html> <html> <head> <title>layui下拉框多选</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE"> <link rel="stylesheet" href="lib/layui/css/layui.css"> <script src="lib/layui/layui.js" charset="utf-8"></script> <link rel="stylesheet" href="lib/layui/formSelects-v4.css"> </head> <body> <div style="padding: 20px; height: 600px;"> <form class="layui-form" action=""> <div style="width: 300px; display: inline-block; margin-right: 10px;"> <select name="city" xm-select="method-value-example1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> </form> <button class="layui-btn" onclick="on()">ok</button> </div> </body> <script src="lib/layui/layui.all.js" type="text/javascript" charset="utf-8"></script> <script src="/formSelects-v4.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var formSelects = layui.formSelects; </script> <script> var we='2' formSelects.value('method-value-example1', [we ]);//赋值选中,为option的value值,数组形式,给上海和深圳选中 </script> <script> function on(){ var a=JSON.stringify(formSelects.value('method-value-example1', 'valStr'));//值为2,4(选中为上海,深圳) alert(a); } </script> </html>
运行结果:


样例二:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 引入插件 -->
<script src="js/xm-select.js" type="text/javascript" charset="utf-8"></script>
<!-- 渲染页面 -->
<div id="demo2" class="xm-select-demo"></div>
<br/><br/>
<button class="btn" id="name">获取name数组</button>
<pre id="demo2-value"></pre>
<script>
var demo2 = xmSelect.render({
el: '#demo2',
data: [
{name: '张三', value: 1},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
var types = ['name'];
types.forEach(function(type){
document.getElementById(type).onclick = function(){
//获取当前多选选中的值
var selectArr = demo2.getValue(type);
alert(type);
document.getElementById('demo2-value').innerHTML = JSON.stringify(selectArr, null, 2);
}
});
</script>
</body>
</html>
运行结果:





用到的另外一些知识点:



