首先需要下載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>
運行結果:





用到的另外一些知識點:



