首先需要下載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>
運行結果:
用到的另外一些知識點: